antd-vue-table 实现表格的拖拽换顺序，100%成功

原创已于 2022-02-22 16:14:31 修改 · 8.6k 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-02-22 15:49:52 首次发布

vue3 专栏收录该内容

25 篇文章

订阅专栏

这篇博客展示了如何利用Ant Design Vue的表格组件实现数据行的拖拽排序功能。通过监听`onDragstart`、`onDragover`、`onDrop`等事件，配合数据操作，实现了表格行的交互式交换位置。代码示例中详细解释了各个关键步骤，为读者提供了直接可用的代码片段。

话不多说啊，兄弟们，看到很多人在找这个，我马上给你们安排了
直接上代码安排起来好吧
直接拿捏
当然用AntdVue团队里面的高级组件就能实现各种高级效果我的这个就是简单的例子
我把高级组件地址给你们贴出来，下载安装都可以看这个文档: Surely Vue

我的就是简单的 antd-vue 表格的操作偷懒的直接用就行

<template>
  <div class="approvalStyle">
    <a-table
      style="margin-top: 20px; background: #fff"
      :columns="columns"
      :dataSource="dataSource"
      :customRow="customRow"
    >
    </a-table>
  </div>
</template>

<script>
import { Table } from 'ant-design-vue'; // 引入antd的表格，样式引入自己配置
import { reactive } from '@vue/reactivity';

export default {
  name: 'Atable',
  components: {
    [Table.name]: Table
  },
  data() {
    return {
      columns: [
        {
          dataIndex: 'name',
          title: 'name'
        },
        {
          dataIndex: 'address',
          title: 'address'
        },
        {
          dataIndex: 'age',
          title: 'age'
        }
      ]
    };
  },
  setup() {
    let change1 = null; // 源目标数据序号
    let change2 = null; // 目标数据序号
    let dataSource = reactive([
      {
        name: '张三',
        age: 14,
        address: '北京',
        key: 3
      },
      {
        name: '李四',
        age: 15,
        address: '南京',
        key: 2
      },
      {
        name: '王五',
        age: 16,
        address: '东京',
        key: 1
      }
    ]);
    function customRow(record, index) {
       console.log(record, index);// 这里输出是表格全部的数据
      return {
        props: {
          // draggable: 'true'
        },
        style: {
          cursor: 'pointer'
        },
        // 鼠标移入
        onMouseenter: (event) => {
          // 兼容IE
          var ev = event || window.event;
          ev.target.draggable = true; // 让你要拖动的行可以拖动，默认不可以
        },
        // 开始拖拽
        onDragstart: (event) => {
          // 兼容IE
          var ev = event || window.event;
          // 阻止冒泡
          ev.stopPropagation();
          // 得到源目标数据序号
          change1 = index;
          console.log(record, index, 'source');
        },
        // 拖动元素经过的元素
        onDragover: (event) => {
          // 兼容 IE
          var ev = event || window.event;
          // 阻止默认行为
          ev.preventDefault();
        },
        // 鼠标松开
        onDrop: (event) => {
          // 兼容IE
          var ev = event || window.event;
          // 阻止冒泡
          ev.stopPropagation();
          // 得到目标数据序号
          change2 = index;
          // 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
          [dataSource[change1], dataSource[change2]] = [
            dataSource[change2],
            dataSource[change1]
          ];
          console.log(record, index, 'target');
        }
      };
    }
    return {
      dataSource,
      customRow
    };
  }
};
</script>

<style lang="less" scoped>
.approvalStyle {
  .listStyle {
    font-size: 16px;
    padding: 20px;
    background: #fff;
    width: 300px;
    border: 1px solid #efefef;
  }
}
</style>