elementui表格列拖动(使用sortablejs插件)

sortablejs文档:https://segmentfault.com/a/1190000008209715

1.下载并引入sortablejs插件

import Sortable from 'sortablejs'

2.渲染表格

<el-table ref='table' :data="tableData" stripe :height="relHeight" :row-class-name="tableRowClassName"
  @selection-change="handleSelectionChange" @row-contextmenu="rowMenu" style="width: 100%" v-loading="listLoading">
  <el-table-column class-name="cannotDrag" v-if="showSelection" type="selection" width="55" /> <!--checkbox-->
  <el-table-column class-name="cannotDrag" label='序号' fixed type="index" min-width="50" max-width="50" />
  <el-table-column :label='$t("tableTitle.code")' prop="code" sortable class-name="cannotDrag"></el-table-column>
<el-table-column v-for="(item,index) in col" sortable :key="index" :prop="dropCol[index].prop" :label="item.label"
 v-if="item.label!=''" :class-name="index==1?'cannotDrag':'canDrag'"></el-table-column>
<el-table-column class-name="cannotDrag" :label='$t("tableTitle.handle")' width="120">
   <template slot-scope="scope">
      <el-button size="mini" @click="openDraw('1',scope.row)">修改</el-button>
      <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
   </template>
</el-table-column>
</el-table>

<!--不需要拖动的列添加类名cannotDrag,需要拖动的列添加类名canDrag,两个都要添加,如果只添加一个会出现部分仍然能拖动的情况-->

3.js部分

data() {
   return {
      col: [   //th和对于的td字段
          {
            label: "",    //label为空的表示为序号和checkbox,占位
            prop: "",
            isConcat: false
         },
         {
            label: "",
            prop: "",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.chineseName"),
            prop: "cn",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.englishName"),
            prop: "en",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.areaType"),
            prop: "type",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.editUser"),
            prop: "modifyuser",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.editDate"),
            prop: "modifytime",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.createUser"),
            prop: "adduser",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.createDate"),
            prop: "createTime",
            isConcat: false
         },

      ],
      dropCol: [  //拖动所需要的th和td,与上面数组一样
          {
            label: "",
            prop: "",
            isConcat: false
         },
         {
            label: "",
            prop: "",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.chineseName"),
            prop: "cn",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.englishName"),
            prop: "en",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.areaType"),
            prop: "type",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.editUser"),
            prop: "modifyuser",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.editDate"),
            prop: "modifytime",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.createUser"),
            prop: "adduser",
            isConcat: false
         },
         {
            label: this.$t("tableTitle.createDate"),
            prop: "createTime",
            isConcat: false
         },

      ],
   }
},

mounted() {
   this.columnDrop()
}
methods: {
   columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
         animation: 180,
         delay: 0,
         filter: ".cannotDrag",
         draggable: ".canDrag",
         onEnd: evt => {
            const oldItem = this.dropCol[evt.oldIndex]
            this.dropCol.splice(evt.oldIndex, 1)
            this.dropCol.splice(evt.newIndex, 0, oldItem)
         }
      })
   },
},