Vue + Elelemt-UI + Table + SortableJs 行拖动排序

最新推荐文章于 2024-08-29 17:15:26 发布

MolinOne

最新推荐文章于 2024-08-29 17:15:26 发布

阅读量441

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/u010537432/article/details/105264266

版权

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用Vue框架实现的可拖拽行的表格组件，通过整合sortablejs库，使得表格数据行可以被用户直接拖动进行重新排序。文章详细展示了组件的HTML模板结构、JavaScript逻辑代码及数据绑定方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="sortTable">
    <el-table :data="tableData" style="width: 100%" row-key="date">
      <el-table-column align="center" type="index"></el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from "sortablejs";

export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          tag: "家"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
          tag: "公司"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
          tag: "家"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
          tag: "公司"
        }
      ]
    };
  },
  mounted() {
    this.rowDrop();
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document
        .getElementById("sortTable")
        .querySelector("table tbody"); //只有是filedId时才可以拖动
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        }
      });
    }
  }
};
</script>