在官网Ant Design Vue案例的表格列可伸缩一直不生效,于是查阅资料自己写了一个能用的。
封装Mixins:

/**
 * 表格处理混入mixins
 * 引入此 mixins 并给a-table添加 :components="components"可以为表格头新增拖拽功能,
 * 注意:表格列的配置描述columns的变量名必须为columns,且必须设置width,且不能用Object.freeze()。
 * 如不满足业务可直接在组件中重载数据或方法
 */
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

Vue.component('vue-draggable-resizable', VueDraggableResizable)
export default {
  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 {}
  },
}

在需要处理的表格中使用:

 <a-table
                    :components="components"
                    :columns="columns"
                    :data-source="tableData"
                    rowKey="id" 
                  >
                  ...
                  </a-table>



<script>
import draggableResizableTable from '@/mixins/draggableResizableTable'

export default {
  mixins: [ draggableResizableTable],
  data() {
   return {
   tableData:[],
      columns:[
       {
       title:'姓名',
 	   dataIndex: 'name',
  	   width:150,
  },
       {
       title:'年龄',
 	   dataIndex: 'age',
  	   width:150,
  },
       {
       title:'地址',
 	   dataIndex: 'adress',
  	   width:150,
  },
  ],
      }
      }
      }
Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐