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

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

1.下载并引入sortablejs插件

import Sortable from 'sortablejs'

2.渲染表格

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)
         }
      })
   },
},