vue + antdesign使用vue-draggable-resizable实现表格列拖拽

最新推荐文章于 2025-11-14 17:39:31 发布

原创最新推荐文章于 2025-11-14 17:39:31 发布 · 8k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了如何在AntDesign1.x版本的表格中实现列宽的自定义拖拽功能，由于该版本不支持此特性，作者利用vue-draggable-resizable插件进行集成实现。主要步骤包括安装插件、引入并注册组件、在table组件中配置components属性以及定义相关数据和样式。

需求： 表格列太多，想要自定义拖拽宽度。antdesign 3.0+版本table自带伸缩列的功能，但我项目中用的是1.0+版本，所以只有结合vue-draggable-resizable拖拽插件来实现了

效果图：

vue-draggable-resizab表格列自定义拖拽

实现代码：
1.下载插件依赖

npm install --save vue-draggable-resizable

2.在main.js中引入插件

import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

3.在使用页面中重新引入插件

import VueDraggableResizable from 'vue-draggable-resizable'

4.在table 组件中添加components属性

<a-table
        bordered
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="pagination"
        :rowKey="(record,index)=>{return index}"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
        :scroll="{x:'max-content',y:540}"
        :components='components'>
</a-table>

5.在data中定义components属性代码(columns每一列都要设置width，如果不设置width属性，拖动时不生效)

<script>
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
components: {
    VueDraggableResizable
  },
  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 {
      columns:[
        {
          title: '商品名称',
          dataIndex: 'goods_name',
          width: 150,
          // ellipsis: true 不要加这个属性，不然拖拽到最小宽度时，表头和表格会发生错位
        },
        {
          title: '商品编号',
          dataIndex: 'spec_code',
          width: 120,
          scopedSlots: { customRender: 'specCode' }
        },
        {
          title: '规格型号',
          dataIndex: 'spec_name',
          width: 100,
          scopedSlots: { customRender: 'specName' }
        },
        {
          title: '单位',
          dataIndex: 'goods_unit_name',
          width: 100,
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 120,
          customRender: (text, row, index) => {
            if (text == '1') {
              return '有效'
            } else {
              return '失效'
            }
          }
        },
        {
          title: '分类',
          dataIndex: 'gc_name',
          width: 200,
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 180,
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  }
}
</script>

6.添加style样式(style不能添加scoped属性)

<style>
	.table-draggable-handle {
	  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>

完整代码：

<template>
	<a-table
        bordered
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="pagination"
        :rowKey="(record,index)=>{return index}"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
        :scroll="{x:'max-content',y:540}"
        :components='components'>
</a-table>
</template>
 
<script>
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 {
      columns:[
        {
          title: '商品名称',
          dataIndex: 'goods_name',
          width: 150,
        },
        {
          title: '商品编号',
          dataIndex: 'spec_code',
          width: 120,
          scopedSlots: { customRender: 'specCode' }
        },
        {
          title: '规格型号',
          dataIndex: 'spec_name',
          width: 100,
          scopedSlots: { customRender: 'specName' }
        },
        {
          title: '单位',
          dataIndex: 'goods_unit_name',
          width: 100,
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 120,
          customRender: (text, row, index) => {
            if (text == '1') {
              return '有效'
            } else {
              return '失效'
            }
          }
        },
        {
          title: '分类',
          dataIndex: 'gc_name',
          width: 200,
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 180,
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  }
}
</script>
 
<style>
	.table-draggable-handle {
	  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>