diff --git a/components/table/__tests__/table-831.spec.ts b/components/table/__tests__/table-831.spec.ts new file mode 100644 index 000000000..1850789fc --- /dev/null +++ b/components/table/__tests__/table-831.spec.ts @@ -0,0 +1,137 @@ +import { describe, expect, it } from 'vitest'; +import { h } from 'vue'; +import { mount } from '@vue/test-utils'; +import FTable from '../table'; +import FTableColumn from '../column'; + +describe('FTable column minWidth/maxWidth support', () => { + const defaultData = [ + { id: 1, name: 'John', age: 30 }, + { id: 2, name: 'Jane', age: 25 }, + ]; + + it('should apply minWidth as number to column', () => { + const wrapper = mount(FTable, { + props: { + data: defaultData, + }, + slots: { + default: () => [ + h(FTableColumn, { + prop: 'name', + label: 'Name', + minWidth: 120, + }), + h(FTableColumn, { + prop: 'age', + label: 'Age', + }), + ], + }, + }); + + const th = wrapper.findAll('th')[0]; + expect(th.attributes('style')).toContain('min-width'); + }); + + it('should apply maxWidth as number to column', () => { + const wrapper = mount(FTable, { + props: { + data: defaultData, + }, + slots: { + default: () => [ + h(FTableColumn, { + prop: 'name', + label: 'Name', + maxWidth: 100, + }), + h(FTableColumn, { + prop: 'age', + label: 'Age', + }), + ], + }, + }); + + const th = wrapper.findAll('th')[0]; + expect(th.attributes('style')).toContain('max-width'); + }); + + it('should apply minWidth as string to column', () => { + const wrapper = mount(FTable, { + props: { + data: defaultData, + }, + slots: { + default: () => [ + h(FTableColumn, { + prop: 'name', + label: 'Name', + minWidth: '150px', + }), + h(FTableColumn, { + prop: 'age', + label: 'Age', + }), + ], + }, + }); + + const th = wrapper.findAll('th')[0]; + const style = th.attributes('style'); + expect(style).toContain('min-width: 150px'); + }); + + it('should apply maxWidth as string to column', () => { + const wrapper = mount(FTable, { + props: { + data: defaultData, + }, + slots: { + default: () => [ + h(FTableColumn, { + prop: 'name', + label: 'Name', + maxWidth: '80px', + }), + h(FTableColumn, { + prop: 'age', + label: 'Age', + }), + ], + }, + }); + + const th = wrapper.findAll('th')[0]; + const style = th.attributes('style'); + expect(style).toContain('max-width: 80px'); + }); + + it('should apply both minWidth and maxWidth to column', () => { + const wrapper = mount(FTable, { + props: { + data: defaultData, + }, + slots: { + default: () => [ + h(FTableColumn, { + prop: 'name', + label: 'Name', + minWidth: 80, + maxWidth: 200, + }), + h(FTableColumn, { + prop: 'age', + label: 'Age', + }), + ], + }, + }); + + const th = wrapper.findAll('th')[0]; + const style = th.attributes('style'); + expect(style).toContain('min-width: 80px'); + expect(style).toContain('max-width: 200px'); + }); +}); \ No newline at end of file diff --git a/components/table/column.tsx b/components/table/column.tsx index 05fe0b02a..e80e2b296 100644 --- a/components/table/column.tsx +++ b/components/table/column.tsx @@ -43,8 +43,9 @@ export const columnProps = { type: String as PropType<(typeof ALIGN)[number]>, default: 'left', }, - width: Number, - minWidth: Number, + width: [Number, String] as PropType, + minWidth: [Number, String] as PropType, + maxWidth: [Number, String] as PropType, colClassName: [Function, String, Array, Object] as PropType< | string | [] diff --git a/components/table/useTableStyle.ts b/components/table/useTableStyle.ts index fbfa24c29..3fcf5ef5d 100644 --- a/components/table/useTableStyle.ts +++ b/components/table/useTableStyle.ts @@ -249,7 +249,7 @@ export default ({ ]; }; - const getCellStyle = ({ + const getCellStyle = ({ column, columns, row, @@ -287,7 +287,16 @@ export default ({ ); fixedStyle.right = `${width}px`; } - return { ...alignStyle, ...fixedStyle }; + const widthStyle: CSSProperties = {}; + if (column.props.minWidth !== undefined) { + const val = column.props.minWidth; + widthStyle.minWidth = typeof val === 'number' ? `${val}px` : val; + } + if (column.props.maxWidth !== undefined) { + const val = column.props.maxWidth; + widthStyle.maxWidth = typeof val === 'number' ? `${val}px` : val; + } + return { ...alignStyle, ...fixedStyle, ...widthStyle }; }; const getCustomCellStyle = ({