使用antdv的a-table行拖拽

使用antdv的a-table行拖拽

使用a-table行拖拽，实现上下换行

sortablejs中文网

    <div ref="tableContainer">
        <a-table
                bordered
                size="middle"
                :columns="columns"
                :data-source="[{name: 1}, {name: 2}, {name: 3}]"
                :pagination="false"
                :scroll="{ x: true }"
        >
            <template slot="code" slot-scope="text, row">
                <a-input style="width: 200px" v-model="row.code" placeholder="请输入顺序号"></a-input>
            </template>

            <template slot="action" slot-scope="text, row">
                <a-icon :style="setMultStyle" style="transform: rotate(45deg);color: #1890ff;font-size: 20px;"
                        type="fullscreen"/>
            </template>
        </a-table>
    </div>

export default {
  name: 'sotrTable',
  data(){
     return {
       	  enabled:true,
		  dataSource: [{nodeName: 1}, {nodeName: 2}, {nodeName: 3}],
		  columns: [
		      {
		          title: '名称',
		          dataIndex: 'name',
		          align: 'center'
		      },
		      {
		          title: '顺序号',
		          dataIndex: 'code',
		          align: 'center',
		          scopedSlots: {customRender: 'code'}
		      },
		      {
		          title: '操作',
		          dataIndex: 'action',
		          scopedSlots: {customRender: 'action'},
		          align: 'center',
		          // fixed: 'right',
		          width: 150
		      }
		  ],
     }
  },
       computed: {
            setMultStyle() {
                return {
                    cursor: this.enabled ? 'move' : 'default'
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                let tableContainer = this.$refs.tableContainer
                this.rowDrop(tableContainer)
            })
        },
        methods: {
            rowDrop(dom) {
                console.log(dom.querySelector('.ant-table>.ant-table-content .ant-table-tbody'))
                new Sortable.create(dom.querySelector('.ant-table>.ant-table-content .ant-table-tbody'), {
                    handle: '.ant-table-row', // 行元素
                    animation: 150,
                    onEnd: ({newIndex, oldIndex}) => {
                        console.log(newIndex, oldIndex)
                        // 拖拽后回调
                        const currRow = this.dataSource.splice(oldIndex, 1)[0]
                        console.log(currRow)
                        console.log(this.dataSource[newIndex])
                        this.dataSource.splice(newIndex, 0, currRow)
                        this.dataSource.forEach((row, index) => {
                            row.sort = index + 1
                        })
                    }
                })
            },
        }
}