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

公用js变量：

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

公用js方法：

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

 

第一种 父子关联属性：

 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：

<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：

<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方法：

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

效果图：