Vue+ant表格可拖动列宽

前言

之前一直用的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>