ElementUI el-tree拖拽时，选中项被取消勾选问题解决

最新推荐文章于 2024-07-30 10:07:20 发布

_Jika_

最新推荐文章于 2024-07-30 10:07:20 发布

阅读量286

点赞数 3

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/weixin_37331593/article/details/140554467

版权

问题：使用el-tree同时开启勾选和拖拽功能，在拖拽排序时，勾选项的状态会被改变。

解决办法：
第一步：定义节点列表，用于保存已选节点

defaultCheckedKeys: []

第二步：添加check事件，点击节点时，节点状态改变，获取最新选中节点列表，保存下来

@check="check" // 添加到 el-tree 标签

check (data, checkNodes) {
  this.defaultCheckedKeys = checkNodes.checkedKeys;
},

第三步：添加 node-drop 事件，当拖拽结束后，将已保存的节点再次赋值选中

@node-drop="handleDrop" // 添加到 el-tree 标签

handleDrop (draggingNode, dropNode, dropType, ev) {
  this.$nextTick(() => {
    this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys);
  });
},

关注