a-table动态列宽拖拽vue

所需依赖及版本：

"vue-draggable-resizable": "^2.3.0"

"ant-design-vue": "1.7.8"

封装dragMixin文件： import VueDraggableResizable from 'vue-draggable-resizable'; import '@/assets/less/draggableResizable.less' export const draggableResizable = { components: { VueDraggableResizable }, data() { return {} }, created() { }, mounted() { let nodeTable = document.getElementsByClassName('ant-table-fixed') nodeTable[0].style.removeProperty("width") }, methods: { /** * 表格列可拖拽 * 表格上使用：:components="drag(columns)" * tips:columns中需包含dataIndex或者key和width(Number) */ drag(columns) { return { header: { cell: this.initDrag(columns), }, } }, initDrag(columns) { return (h, props, children) => { const {key, ...restProps} = props const col = columns.find((col) => { const k = col.dataIndex || col.key return k === key }) if (!col || !col.width) { return h('th', {...restProps}, [...children]) } const dragProps = { key: col.dataIndex || col.key, class: 'table-draggable-handle', attrs: { w: 10, x: col.width, z: 1, axis: 'x', draggable: true, resizable: false, }, on: { dragging: (x, y) => { col.width = Math.max(x, 1) }, }, } const drag = h('vue-draggable-resizable', {...dragProps}) return h('th', {...restProps, class: 'resize-table-th'}, [...children, drag]) } } } } dragResizable.less 文件： .resize-table-th { position: relative; .table-draggable-handle { transform: none !important; position: absolute; height: 100% !important; bottom: 0; left: auto !important; right: 0; cursor: col-resize; touch-action: none; } } .ant-table-header-column > div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 组件内使用： :components="drag(columns)" 利用a-table components api自定义table <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :components="drag(columns)" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="j-table-force-nowrap" @change="handleTableChange" > </a-table>