关于vue2:vue2使用sortablejs实现eltable的行拖拽

4次阅读

共计 1391 个字符，预计需要花费 4 分钟才能阅读完成。

<!-- 全局组件 -->
<gl-dialog :title="dialogTitle" ref="dialog" top="2vh" :destroy-on-close="true" :visible.sync="visible" width="92%" @close="closeDialog">
      <!-- 全局组件 -->
      <gl-table
        v-if="visible"
        height="750px"
        row-key="id"
        :ref="tableKey"
        :loading="loading"
        :column="filterColumns"
        :table-data="dataList"
        :total="dataCount"
        :show-total="false"
        :display-label="displayLabel"
        :sortChange="sortChange"
        :hidePagination="true"
        @pagination="handlePagination">
        <el-table-column label="操作" width="60" fixed="right" align="center" v-if="isEmptyData&&handleType==='edit'">
          <template slot-scope="{row}">
            <el-button size="mini" type="text" @click.stop="dialogHandle(row)"> 批改 </el-button>
          </template>
        </el-table-column>
      </gl-table>

js 局部

setSort() {const table = this.$refs[this.tableKey].$refs.multipleTable;
      // 获取 el-table 的 tbody 的 dom 节点
      const el = table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];

      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        onEnd: evt => {const targetRow = this.dataList.splice(evt.oldIndex, 1)[0];
          // this.dataList 是 table 的数据，通过 splice 进行替换，从而达到数据更新目标        
          this.dataList.splice(evt.newIndex, 0, targetRow);
          this.$nextTick(() => {table.doLayout();
          })
        }
      })
    },

css 局部

.sortable-ghost { //setSort 中绑定的 class
  opacity: .8;
  color: #fff!important;
  background: #00BBB3!important;
  
}
::v-deep .editTable .el-table__body:hover {cursor: move;}

注意事项：