vue element table 表格列进行再排序

最新推荐文章于 2024-07-30 17:40:26 发布

白马湖小龙王

最新推荐文章于 2024-07-30 17:40:26 发布

阅读量9k

点赞数

分类专栏：前端 vue自定义组件文章标签： element table 拖拽排序

本文链接：https://blog.csdn.net/weixin_39168678/article/details/87971666

版权

本文介绍如何在Vue项目中使用Element UI的表格组件实现列的拖拽排序功能，通过示例和源码分享具体实现步骤。

摘要由CSDN通过智能技术生成

示例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eTxjqDcF-1571831666385)(http://www.oujin.fun/img/dragTable/1.gif)]
展示
http://www.oujin.fun/webPage/dragTable/index.html#/
用法
https://github.com/oujin-nb/column_element_dragtable
源码

<template>
  <div>
    <el-table
      v-on="$listeners"
      v-bind="$attrs"
      @header-contextmenu="changeStart"
      @header-click="headerClick"
      :header-cell-class-name="headerClass"
    >
      <el-table-column
        v-for="(item,index) in obj.pd"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      ></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  created() {},
  mounted() {},
  props: {
    opt: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      startDrag: "",
      aIndex: "",
      bIndex: "",
      headerClass: () => {
        return "";
      }
    };
  },
  methods: {
    // 右键点击开启拖拽模式
    changeStart(s) {
      // 获取拖拽范围
      const dom = document.querySelectorAll(
        ".el-table__header-wrapper >.el-table__header > .has-gutter >tr>." +
          s.id
      );
      let doms = dom[0].parentNode.children;
      // 定義拖拽停靠事件
      dom[0].parentNode.addEventListener("drop", (e)=> {
          this.exchange(e.target.innerText);
      });
      dom[0].parentNode.addEventListener("dragover", function(e) {
        e.preventDefault();
      });
      let dList = [].slice.call(doms);
      dList.forEach(s => {
        s.setAttribute("draggable", "true");
        s.setAttribute("class", s.getAttribute("class") + " " + "shaky");
        s.addEventListener('dragstart',(e)=>{
            this.startDrag = e.target.innerText
        })
      });
      event.preventDefault();
    },
    // 左键点击关闭拖拽模式
    headerClick(s) {
      const dom = docu