fix(table-column): parse width and minWidth (#2466)

* fix(table-column): parse width and minWidth

* fix: modify type of value
This commit is contained in:
BeADre 2021-07-12 18:15:17 +08:00 committed by GitHub
parent 1cdf7400db
commit 1e44af0b91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 4 deletions

View File

@ -926,11 +926,18 @@ describe('table column', () => {
expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
'100',
)
wrapper.vm.width = 200
await nextTick()
expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
'200',
)
wrapper.vm.width = '300px'
await nextTick()
expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
'300',
)
wrapper.unmount()
})
@ -961,11 +968,18 @@ describe('table column', () => {
expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
'100',
)
wrapper.vm.width = 200
await nextTick()
expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
'200',
)
wrapper.vm.width = '300px'
await nextTick()
expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
'300',
)
wrapper.unmount()
})

View File

@ -12,6 +12,8 @@ type Filters = {
type FilterMethods<T> = (value, row: T, column: TableColumnCtx<T>) => void
type ValueOf<T> = T[keyof T]
interface TableColumnCtx<T> {
id: string
realWidth: number
@ -72,7 +74,7 @@ interface TableColumn<T> extends ComponentInternalInstance {
columnConfig: Ref<Partial<TableColumnCtx<T>>>
}
export type { Filters, FilterMethods, TableColumnCtx, TableColumn }
export type { Filters, FilterMethods, TableColumnCtx, TableColumn, ValueOf }
export default {
type: {

View File

@ -1,6 +1,7 @@
import { watch, getCurrentInstance, ComputedRef } from 'vue'
import { hasOwn } from '@vue/shared'
import { TableColumnCtx, TableColumn } from './defaults'
import type { TableColumnCtx, TableColumn, ValueOf } from './defaults'
import { parseMinWidth, parseWidth } from '../util'
function useWatcher<T>(
owner: ComputedRef<any>,
@ -24,8 +25,15 @@ function useWatcher<T>(
watch(
() => props_[columnKey],
newVal => {
instance.columnConfig.value[columnKey] = newVal
instance.columnConfig.value[key] = newVal
let value: ValueOf<TableColumnCtx<T>> = newVal
if (columnKey === 'width' && key === 'realWidth') {
value = parseWidth(newVal)
}
if (columnKey === 'minWidth' && key === 'realMinWidth') {
value = parseMinWidth(newVal)
}
instance.columnConfig.value[columnKey as any] = value
instance.columnConfig.value[key] = value
const updateColumns = columnKey === 'fixed'
owner.value.store.scheduleLayout(updateColumns)
},