前言
之前一直用的elementui组件库，el-table是可以拖动列宽的。但是最近新接触的ant组件库不行，必须要自己做些修改了，官网上面也给出了解决方案: vue-draggable-resizable
一、安装vue-draggable-resizable插件
yarn add vue-draggable-resizable
二、全局引入组件或局部引入
在项目的main.js中全局引入
// 挂载全局使用的方法
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
或者在页面中局部引入选其一
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
三、在a-table中添加components属性
注意：一定要有bordered属性，columns必须有宽度width
四、定义components
handleDrag(column){
return {
header: {
cell: (h, props, children) => {
const {
key, ...restProps } = props
const col = column.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(VueDraggableResizable, {
...dragProps }) //此为局部注册
//全局引入使用'vue-draggable-resizable'替换VueDraggableResizable
return h('th', {
...restProps, class: 'resize-table-th' }, [...children, drag])
},
}
}
}
完整代码
注意：style不要加scoped作用域
<template>
<a-card :bordered="false">
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:components="handleDrag(columns)"
>
</a-table>
</a-card>
</template>
<script>
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
export default {
components: {
VueDraggableResizable
},
data() {
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' },
},
],
}
},
methods:{
handleDrag(column){
return {
header: {
cell: (h, props, children) => {
const {
key, ...restProps } = props
const col = column.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(VueDraggableResizable, {
...dragProps })
return h('th', {
...restProps, class: 'resize-table-th' }, [...children, drag])
},
}
}
},
},
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>