使用sortable对el-table-column进行拖拽

sortable.js文档:

sortable.js中文文档 - itxst.com

Sortable.js中文网

我的使用:

注意事项:

el-table一定要添加 row-key否则拖拽不生效!!

class="dragTableBtn"指定拖拽柄

el-table-column如果加了fixed,拖拽会失效,因为不能正确地拿到拖拽柄

  <el-table ref="boardListTable" row-key="id">
    <el-table-column type="index"> </el-table-column>
      <!-- <el-table-column label="序号" min-width="40" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column> -->
    <el-table-column prop="createName" label="创建人" min-width="80" show-overflow-tooltip align="center" />
    <el-table-column label="操作" width="180" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" class="dragTableBtn" >拖动</el-button>
        </template>
      </el-table-column>
 </el-table>
    //拖动table的单行
    setSort() {
      //拿到el-table
      const boardListTable = this.$refs.boardListTable;
      //获取到el-table表头下方的tbody表格元素
      const el = boardListTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
      this.sortable = Sortable.create(el, {
        //项被拖拽的过程中跟随它的那个影子的样式
        ghostClass: "dragTableBtn",
        //指定拖拽柄才能拖拽动父元素
        handle: ".dragTableBtn",
        //拖拽结束事件
        onEnd: evt => {
          // 获取到新位置的行数据
          const newRow = JSON.parse(JSON.stringify(this.tableData[evt.newIndex]));
          // 删除旧位置的行数据,并获取到旧位置的行数据
          const oldRow = this.tableData.splice(evt.oldIndex, 1)[0];
          // oldRow插入到tableData的新位置evt.newIndex之前
          this.tableData.splice(evt.newIndex, 0, oldRow);
          this.isLoading = true;
          //将项的id和拖拽到目标项的id(newId)传给后端,后端修改sort字段的序号,数据持久化
          callWithErrorMsg(
            changeScheduleSort,
            {
              newId: newRow.id,
              id: oldRow.id
            },
            () => {
              this.isLoading = false;
            }
          );
        }
      });
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值