antdesign vue表格行拖拽

Ant Design Vue 表格是基于 antd table 和 Vue.js 的组合，它包含了用于处理表格行拖拽的便捷方法。要实现表格行拖拽，可以设置当前表格的行可拖拽：

<template>
  <a-table
    :columns="columns"
    :dataSource="dataSource"
    rowKey="key"
    :components="{ body: { row: DragableBodyRow } }"
    :onRow="handleOnRow"
    bordered
  />
</template>

同时，还需要定义 `DragableBodyRow` 组件，该组件包含了用于拖拽行的逻辑：

const DragableBodyRow = {
  props: ['index', 'moveRow', 'className', 'record', 'components'],
  render() {
    const { index, moveRow, className, record, components, ...restProps } = this.$props;
    const Component = components.body.row;
    const dragProps = {
      index,
      moveRow,
      className: 'drag-visible',
      'data-row-key': record.key,
      onDrag(event) {
        event.preventDefault();
      },
      onDragEnd(event) {
        event.preventDefault();
        moveRow(index, event.currentTarget.dataset.rowKey);
      },
    };
    return (
      <Component {...restProps} {...dragProps} />
    );
  },
};

其中，`moveRow` 函数负责处理行拖拽的操作：

methods: {
  moveRow(dragIndex, hoverIndex) {
    const { dataSource } = this;
    const dragRecord = dataSource[dragIndex];
    this.$set(dataSource, dragIndex, dataSource[hoverIndex]);
    this.$set(dataSource, hoverIndex, dragRecord);
  },
  handleOnRow(record, index) {
    return {
      index,
      moveRow: this.moveRow,
    };
  },
},

最后，在 `mounted` 钩子函数中需要添加以下样式代码：

/* Table row drag */
.drag-visible {
  cursor: move;
}
.drag-visible:hover {
  background-color: #e6f7ff;
}
.ant-table-placeholder {
  border: none !important;
}

这样就可以实现基于 Ant Design Vue 的表格行拖拽操作了。希望对你有所帮助。