关于使用sortable.js让element表格可拖拽效果

Sortable.js是一款优秀的js拖拽库，支持触屏设备和大部分浏览器。不依赖jQuery。支持 AngularJS、React、Vue框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。在此推荐个简单明了的网站（http://www.sortablejs.com/index.html），安装步骤就不多说了，相信各位大佬都会找百度，有兴趣的也可以研究它的源码(https://github.com/SortableJS/Sortable)。

废话不多说，代码给各位！！

//需要拖拽的表格
<el-table
              ref="rulesTable"
              v-loading="automaticLoading"
              :data="automaticData"
              row-key="prop"
              fit
              border
              height="500"
              highlight-current-row
              header-row-class-name="table-header"
              cell-class-name="table-cell"
              :row-class-name="tableRowClassName"
              @cell-click="handleCellClick"
              @current-change="handleSelectCurrentRow"
            >
              <el-table-column
                label="选择"
                prop="ruleStatu"
                align="center"
              >
                <template v-slot="{row}">
                  <el-checkbox v-model="row.ruleStatu" :checked="row.ruleStatu===1" :false-label="0" :true-label="1" :disabled="sortFlag" @click.native.stop @change="handleRuLeStatu" />
                </template>
              </el-table-column>
              <el-table-column
                label="规则"
                prop="ruleName"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                label="值"
                prop="ruleValue"
                align="center"
                show-overflow-tooltip
              >
                <template v-slot="{row}">
                  <el-input v-model="row.ruleValue" :disabled="row.ruleValue===null" @click.native.stop />
                </template>
              </el-table-column>
            </el-table>

表格效果图

微信截图_20210608193848.png

使用sortable.js就需要先创建sortable,在创建sortable.js前讲一下遇到了一个可能大家都会出现的问题，就是拖拽效果是有，但是拖拽后的顺序其实视图是没有更新的。

这个是拖拽顺序不生效的代码

  // 创建sortable
    setSort() {
      const el = this.$refs.rulesTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        animation: 150,
        disabled: this.sortFlag,
        onEnd: evt => {
          const oldIndex = evt.oldIndex
          const newIndex = evt.newIndex
          //先删除
       const targetRow=   this.automaticData.splice(oldIndex,1)[0]
        //再添加
        this.automaticData.splice(newIndex,0,targetRow)
        },
//表格顺序更新
        onUpdate: () => {
          this.oldRow = this.multipleSelectionStrategy[0]
          this.oldAutomaticData = this.automaticData
          this.updateRule = true
        }
      })
    },

这个是解决这个问题的代码

 setSort() {
      const el = this.$refs.rulesTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        animation: 150,
        disabled: this.sortFlag,
        onEnd: evt => {
          const oldIndex = evt.oldIndex
          const newIndex = evt.newIndex
          const temp = this.automaticData[oldIndex]
          if (oldIndex < newIndex) { // 向下移动调整顺序
            for (let i = oldIndex; i < newIndex; i++) {
              this.automaticData[i] = this.automaticData[i + 1]
            }
          } else if (oldIndex > newIndex) { // 向上移动时调整顺序
            for (let i = oldIndex; i > newIndex; i--) {
              this.automaticData[i] = this.automaticData[i - 1]
            }
          }
          this.automaticData[newIndex] = temp
        },
        onUpdate: () => {
          this.oldRow = this.multipleSelectionStrategy[0]
          this.oldAutomaticData = this.automaticData
          this.updateRule = true
        }
      })
    },