mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-27 02:01:15 +08:00
feat(components): [table] ensure minimum-size doesn't follow the content (#7627)
* feat(components): [table] ensure minimum-size doesn't follow the content * chore: add version tag
This commit is contained in:
msidolphin
GitHub
parent
d441ee48ef
commit
6f04af6c39
@ -215,43 +215,44 @@ table/table-layout
|
||||
|
||||
## Table Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------ |
|
||||
| data | Table data | array | — | — |
|
||||
| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string / number | — | — |
|
||||
| max-height | Table's max-height. The legal value is a number or the height in px. | string / number | — | — |
|
||||
| stripe | whether Table is striped | boolean | — | false |
|
||||
| border | whether Table has vertical border | boolean | — | false |
|
||||
| size | size of Table | string | large / default /small | — |
|
||||
| fit | whether width of column automatically fits its container | boolean | — | true |
|
||||
| show-header | whether Table header is visible | boolean | — | true |
|
||||
| highlight-current-row | whether current row is highlighted | boolean | — | false |
|
||||
| current-row-key | key of current row, a set only prop | string / number | — | — |
|
||||
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | function(\{ row, rowIndex \}) / string | — | — |
|
||||
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | function(\{ row, rowIndex \}) / object | — | — |
|
||||
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | function(\{ row, column, rowIndex, columnIndex \}) / string | — | — |
|
||||
| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | function(\{ row, column, rowIndex, columnIndex \}) / object | — | — |
|
||||
| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | function(\{ row, rowIndex }\) / string | — | — |
|
||||
| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | function(\{ row, rowIndex \}) / object | — | — |
|
||||
| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | function(\{ row, column, rowIndex, columnIndex \}) / string | — | — |
|
||||
| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | function(\{ row, column, rowIndex, columnIndex \}) / object | — | — |
|
||||
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | function(row) / string | — | — |
|
||||
| empty-text | Displayed text when data is empty. You can customize this area with `#empty` | string | — | No Data |
|
||||
| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | boolean | — | false |
|
||||
| expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | array | — | — |
|
||||
| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | object | `order`: ascending / descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
|
||||
| tooltip-effect | tooltip `effect` property | string | dark / light | dark |
|
||||
| show-summary | whether to display a summary row | boolean | — | false |
|
||||
| sum-text | displayed text for the first column of summary row | string | — | Sum |
|
||||
| summary-method | custom summary method | function(\{ columns, data \}) | — | — |
|
||||
| span-method | method that returns rowspan and colspan | function(\{ row, column, rowIndex, columnIndex \}) | — | — |
|
||||
| select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | boolean | — | true |
|
||||
| indent | horizontal indentation of tree data | number | — | 16 |
|
||||
| lazy | whether to lazy loading data | boolean | — | — |
|
||||
| load | method for loading child row data, only works when `lazy` is true | function(row, treeNode, resolve) | — | — |
|
||||
| tree-props | configuration for rendering nested data | object | — | `{ hasChildren: 'hasChildren', children: 'children' }` |
|
||||
| table-layout | Sets the algorithm used to lay out table cells, rows, and columns | string | fixed / auto | fixed |
|
||||
| scrollbar-always-on | always show scrollbar | boolean | — | false |
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------ |
|
||||
| data | Table data | array | — | — |
|
||||
| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string / number | — | — |
|
||||
| max-height | Table's max-height. The legal value is a number or the height in px. | string / number | — | — |
|
||||
| stripe | whether Table is striped | boolean | — | false |
|
||||
| border | whether Table has vertical border | boolean | — | false |
|
||||
| size | size of Table | string | large / default /small | — |
|
||||
| fit | whether width of column automatically fits its container | boolean | — | true |
|
||||
| show-header | whether Table header is visible | boolean | — | true |
|
||||
| highlight-current-row | whether current row is highlighted | boolean | — | false |
|
||||
| current-row-key | key of current row, a set only prop | string / number | — | — |
|
||||
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | function(\{ row, rowIndex \}) / string | — | — |
|
||||
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | function(\{ row, rowIndex \}) / object | — | — |
|
||||
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | function(\{ row, column, rowIndex, columnIndex \}) / string | — | — |
|
||||
| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | function(\{ row, column, rowIndex, columnIndex \}) / object | — | — |
|
||||
| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | function(\{ row, rowIndex }\) / string | — | — |
|
||||
| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | function(\{ row, rowIndex \}) / object | — | — |
|
||||
| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | function(\{ row, column, rowIndex, columnIndex \}) / string | — | — |
|
||||
| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | function(\{ row, column, rowIndex, columnIndex \}) / object | — | — |
|
||||
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | function(row) / string | — | — |
|
||||
| empty-text | Displayed text when data is empty. You can customize this area with `#empty` | string | — | No Data |
|
||||
| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | boolean | — | false |
|
||||
| expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | array | — | — |
|
||||
| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | object | `order`: ascending / descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
|
||||
| tooltip-effect | tooltip `effect` property | string | dark / light | dark |
|
||||
| show-summary | whether to display a summary row | boolean | — | false |
|
||||
| sum-text | displayed text for the first column of summary row | string | — | Sum |
|
||||
| summary-method | custom summary method | function(\{ columns, data \}) | — | — |
|
||||
| span-method | method that returns rowspan and colspan | function(\{ row, column, rowIndex, columnIndex \}) | — | — |
|
||||
| select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | boolean | — | true |
|
||||
| indent | horizontal indentation of tree data | number | — | 16 |
|
||||
| lazy | whether to lazy loading data | boolean | — | — |
|
||||
| load | method for loading child row data, only works when `lazy` is true | function(row, treeNode, resolve) | — | — |
|
||||
| tree-props | configuration for rendering nested data | object | — | `{ hasChildren: 'hasChildren', children: 'children' }` |
|
||||
| table-layout | Sets the algorithm used to lay out table cells, rows, and columns | string | fixed / auto | fixed |
|
||||
| scrollbar-always-on | always show scrollbar | boolean | — | false |
|
||||
| flexible <VersionTag version="2.2.1" /> | ensure main axis minimum-size doesn't follow the content | boolean | — | false |
|
||||
|
||||
## Table Events
|
||||
|
||||
|
||||
@ -1430,4 +1430,28 @@ describe('Table.vue', () => {
|
||||
expect(wrapper.find('.el-table__body colgroup col').exists()).toBeFalsy()
|
||||
expect(wrapper.find('.el-table__body tbody').exists()).toBeTruthy()
|
||||
})
|
||||
|
||||
it('automatic minimum size of flex-items', async () => {
|
||||
const wrapper = mount({
|
||||
components: {
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
},
|
||||
template: `
|
||||
<div class="right">
|
||||
<el-table flexible :data="testData" table-layout="auto">
|
||||
<el-table-column prop="id" />
|
||||
<el-table-column prop="name" label="片名" />
|
||||
<el-table-column prop="release" label="发行日期" />
|
||||
<el-table-column prop="director" label="导演" />
|
||||
<el-table-column prop="runtime" label="时长（分）" />
|
||||
</el-table>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
await nextTick()
|
||||
expect(wrapper.find('.right').element.getAttribute('style')).toContain(
|
||||
'min-width: 0'
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
@ -135,6 +135,7 @@ interface TableProps<T> {
|
||||
className?: string
|
||||
style?: CSSProperties
|
||||
tableLayout: Layout
|
||||
flexible: boolean
|
||||
}
|
||||
|
||||
interface Sort {
|
||||
@ -259,6 +260,7 @@ export default {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
flexible: Boolean,
|
||||
}
|
||||
export type {
|
||||
SummaryMethod,
|
||||
|
||||
@ -37,7 +37,10 @@ function useStyle<T>(
|
||||
const setDragVisible = (visible: boolean) => {
|
||||
resizeProxyVisible.value = visible
|
||||
}
|
||||
const resizeState = ref({
|
||||
const resizeState = ref<{
|
||||
width: null | number
|
||||
height: null | number
|
||||
}>({
|
||||
width: null,
|
||||
height: null,
|
||||
})
|
||||
@ -120,9 +123,16 @@ function useStyle<T>(
|
||||
bindEvents()
|
||||
requestAnimationFrame(doLayout)
|
||||
|
||||
const el: HTMLElement = table.vnode.el as HTMLElement
|
||||
if (props.flexible && el && el.parentElement) {
|
||||
// Automatic minimum size of flex-items
|
||||
// Ensure that the main axis does not follow the width of the items
|
||||
el.parentElement.style.minWidth = '0'
|
||||
}
|
||||
|
||||
resizeState.value = {
|
||||
width: (tableWidth.value = table.vnode.el.offsetWidth),
|
||||
height: table.vnode.el.offsetHeight,
|
||||
width: (tableWidth.value = el.offsetWidth),
|
||||
height: el.offsetHeight,
|
||||
}
|
||||
|
||||
// init filters
|
||||
|
||||
Loading…
Reference in New Issue
Block a user