应客户要求，表格要实现列宽可以自主调节，用户可以根据自己的喜好，拖动列边框，左右拖动实现列宽的扩大和缩小；ant-design-vue官方文档中，table组件中提供了此功能的示例代码。于是我满怀开心的复制到了我的项目中，结果处处报错，红彤彤的一大片。在修改无果后，我去请教了 无所不会的网友 最后整理了一套可用的。
这篇笔记以 步骤 的形式一步一步的记录如何实现这个功能。有需要的小伙伴可以按照步骤走一遍。
步骤一：安装集成的 vue-draggable-resizable 插件
npm install --save vue-draggable-resizable
步骤二：在项目的main.js中引入插件
// 挂载全局使用的方法
import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
步骤三：在使用页面中重新引入根vue实例和插件
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
注：你可能觉得在main.js中已经引入了插件并且定义成了全局的方法，在这里引入会多此一举。但是我实验过，在使用页面中如果不引入，插件就不能使用，main.js不注册，插件也不能使用。我是不知道为什么，如果有人知道，或者有改进措施，请教教我。
步骤四：ant-design-vue 的 table 组件中添加components属性
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:components="components"
>
</a-table>
步骤五：定义components属性代码
data() {
this.components = {
header: {
cell: (h, props, children) => {
const { key, ...restProps } = props
// 此处的this.columns 是定义的table的表头属性变量
const col = this.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])
},
},
}
return {
}
},
完整代码：
<template>
<a-card :bordered="false">
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:components="components"
>
</a-table>
</a-card>
</template>
<script>
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
export default {
components: {
VueDraggableResizable
},
data() {
this.components = {
header: {
cell: (h, props, children) => {
const { key, ...restProps } = props
const col = this.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])
},
},
}
return {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
},
form: null,
//表头
columns: [
{
title: '项目名称',
dataIndex: 'projectName',
ellipsis: true,
width:200,
},
{
title: '企业名称',
dataIndex: 'company',
ellipsis: true,
width:200,
},
{
title: '责任人',
dataIndex: 'liablePersonName',
ellipsis: true,
width:200,
},
{
title: '附件',
dataIndex: 'picture',
width: 400,
scopedSlots: { customRender: 'fujian' },
},
{
title: '操作',
// fixed: 'right',
dataIndex: 'action',
width: 200,
scopedSlots: { customRender: 'action' },
},
],
}
},
created() {},
}
</script>
<style>
.table-draggable-handle {
/* width: 10px !important; */
height: 100% !important;
left: auto !important;
right: -5px;
cursor: col-resize;
touch-action: none;
border: none;
position: absolute;
transform: none !important;
bottom: 0;
}
.resize-table-th {
position: relative;
}
</style>
注意点：
1，表头columns中，每一列都要设置width，如果不设置width属性，拖动时不生效；
2，style一定要记得添加.table-draggable-handle 和 .resize-table-th 两个class。并且style标签不能家scoped属性。
以上便是可拖拽控制列宽功能的实现步骤。希望对大家有帮助。
拜了个拜！迪迦。。。
