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

效果图:

相关推荐
threelab6 分钟前
three案例 Three.js波纹效果演示
开发语言·javascript·ecmascript
1undefined28 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
paopaokaka_luck30 分钟前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
用户7579419949701 小时前
基于JavaScript的简易Git
javascript
gzzeason1 小时前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7781 小时前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽1 小时前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
自由逐风1 小时前
JS 处理长整型数字的坑:从雪花 ID 精度丢失说起
javascript
爱学习的茄子1 小时前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试