注意点

• columns必须是响应式的。const columns = ref<TableColumnsType>([])
• 设置resizable时width必须是number类型。

具体步骤

1. <a-table>模板中绑定resizeColumn事件。

<a-table 
    :columns="columns" 
    :data-source="data" 
    @resizeColumn="handleResizeColumn">
</a-table>

2. 完成事件处理函数。

const handleResizeColumn=(w:string, col:TableColumnsType) => { 
    col.width = w; 
},

3. 在列描述数据对象columns中，加入resizable参数。

const columns = ref<TableColumnsType>([ 
    { 
        dataIndex: 'name',
        key: 'name', 
        resizable: true, 
        width: 150, 
    }, 
    { 
        title: 'Age', 
        dataIndex: 'age', 
        key: 'age', 
        resizable: true, 
        width: 100, 
        minWidth: 100, 
        maxWidth: 200, 
    }
])```