element ui table中使用拖拽排序组件sortablejs及注意事项

最新推荐文章于 2025-05-21 16:51:44 发布

龖龖龖

最新推荐文章于 2025-05-21 16:51:44 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： ui vue.js javascript

原文链接：https://blog.youkuaiyun.com/yuwenwenwenwenyu/article/details/114700357?ops_request_misc=&request_id=&biz_id=102&utm_term=sortablejs%E4%B8%BA%E4%BB%80%E4%B9%88%E5%9C%A8%E9%A1%B5%E9%9D%A2%E4%B8%AD%E5%8F%AA%E7%94%9F%E6%95%88%E4%B8%80%E6%AC%A1&utm_medium=distribute

本文介绍了如何在Element UI表格中集成Sortable.js实现拖拽排序功能，并详细列出注意事项，包括设置row-key和针对嵌套table的tbody选择。

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

element ui table中使用拖拽排序组件sortablejs及注意事项

1.使用：
先安装 sortablejs插件,然后在当前页面引入

npm install sortablejs --save
import Sortable from "sortablejs";

具体代码如下：

<el-table class="sortingVisible" :data="tableData" row-key="id" v-loading="loading">
      <el-table-column label="公司"  prop="declareUnit"></el-table-column>
      <el-table-column label="议题标题"  prop="title"></el-table-column>
</el-table>

// An highlighted block
<script>
  import Sortable from "sortablejs";
  export default {
    name: "SortingDialog",
    components: {
      Sortable,
    },
  data() {
    return {
      tableData: [],
      loading:true
    };
  },
  created() {},
  mounted() {
	  let _this = this;
	      _this.$nextTick(() => {
	      _this.rowDrop();
	 });
  },
  methods: {
    rowDrop() {
      const tbody = document.querySelector(".sortingVisible .el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];  //当前行
          _this.tableData.splice(newIndex, 0, currRow);
          console.log(_this.tableData) //_this.tableData是拖拽后的表格数据，可直接提交到后端
        },
      });
    }
  }
};
</script>

2.注意事项：
（1）el-table标签上必须带上row-key=" “,否则拖拽不生效；如图：
在这里插入图片描述
（2）当table是嵌套在el-dialog等组件中，并且父组件中包含其他table时，直接使用 document.querySelector(”.el-table__body-wrapper tbody")时会拿到父组件的tbody元素，所以需要给个标识（类名）来拿我们所需要的tbody。如图：
在这里插入图片描述