el-tree多选的父子关联和父子不关联和拖拽功能

前端小凯2024-08-20 15:08

公用js变量：

javascript 复制代码

data () {
    return {
       // 绑定的数组
       treeData: [],
       // 多选选择的id
       ids: []
    }
},

公用js方法：

javascript 复制代码

/**
 * 选择多选改变
 */
nodeChange(data, checked, indeterminate) {
  let keys = this.$refs.treeCategory.getCheckedKeys();
  this.ids = keys;
}

第一种父子关联属性：

html：

html 复制代码

<el-tree ref="treeCategory" :data="treeData" :default-expand-all='true'
  :expand-on-click-node="false" show-checkbox node-key="id"
  :default-checked-keys="ids" @check-change="nodeChange">
</el-tree>

效果图：

第二种父子不关联属性：

html：

html 复制代码

<el-tree ref="treeCategory" :data="treeData" :default-expand-all='true'
  :expand-on-click-node="false" show-checkbox node-key="id"
  :default-checked-keys="ids" @check-change="nodeChange" check-strictly>
</el-tree>

效果图：

第三种拖拽属性：

html：

html 复制代码

<el-tree ref="treeCategory" :data="treeData" :default-expand-all='true'
  :expand-on-click-node="false" show-checkbox node-key="id"
  :default-checked-keys="ids" @check-change="nodeChange" check-strictly
  draggable @node-drop="handleDrop">
</el-tree>

js方法：

javascript 复制代码

/**
 * tree拖拽完成
 */
handleDrop(draggingNode, dropNode, dropType, ev) {
  console.log(draggingNode);
  console.log(dropNode);
}

效果图：