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

公用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);
}

效果图:

相关推荐
斯~内克29 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
山河木马37 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
努力只为躺平42 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手44 分钟前
大保剑:Promise的有趣体验
javascript
李大玄44 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵44 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
markyankee1011 小时前
Vue 计算属性和侦听器详解
vue.js
谦哥1 小时前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
心在飞扬2 小时前
理解JS事件环(Event Loop)
前端·javascript