a-table 结合 Sortable使用，完成表格数据行可以拖拽效果

当Sortable，与 a-table结合使用。这样可以实现表格内行列的拖拽排序功能。以下是一个示例:

安装sortablejs

npm install sortablejs --save

在组件中导入并使用

<a-table ref="table" rowKey="id" :columns="columns" :dataSource="dimensionData" v-drag-drop>
    //增加自己的相关逻辑
</a-table>


<script>
    import Sortable from 'sortablejs';
    
    data(){
        return {
            columns: [
                {title: "名称",dataIndex: "name"},
                {title: "编码",dataIndex: "code"},
                ....
            ],
            dimensionData: [
                {id:600,name: "专用发票",code: "1"},
                {id:601,name: "客旅运输",code: "2"},
                {id:602,name: "代扣代缴",code: "3"},
                ...
            ],
        }
    }


//使用一个自定义指令，v-drag-drop 来实现表格行的拖拽排序功能。

    directives: {
    'drag-drop': {
      inserted(el, binding, vnode) {
        const vm = vnode.context
        const table = vm.$el.querySelector('.ant-table-body > table')
        const tbody = table.querySelector('tbody')
        new Sortable(tbody, {
          animation: 300,
          handle: '.ant-table-row ',
          onEnd: (evt) => {
            const oldIndex = evt.oldIndex
            const newIndex = evt.newIndex
            vm.dimensionData.splice(newIndex, 0, vm.dimensionData.splice(oldIndex, 1)[0])
          }
        })
      }
    }
  },
</script>

当用户拖动表格行时,会触发 onEnd 事件,我们在这个事件中更新 dimensionData数据源,从而更新表格的显示。

需要注意的是,我们使用了 rowKey 属性来唯一标识每一行数据,这是为了保证拖拽操作的正确性。