vue3项目中用v-for循环出来的el-tree如何实现全选和全不选功能
2条回答 默认 最新
关注
- 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7668415
- 这篇博客也不错, 你可以看下vue使用el-tree实现全选、反选
- 除此之外, 这篇博客: Vue el-tree 如何实现单选中的 Vue el-tree 如何实现单选 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
最近项目用到el-tree,并且需要实现单选,搜了很多文章并研究了一下,实现代码如下,希望可以对你有帮助!
<el-tree class="tree-tap" :data="deaplist" show-checkbox node-key="deptid" ref="treeForm" :check-on-click-node="true" :props="defaultProps" @check="changetree" @check-change="handleNodeClick" ></el-tree>
data(){ return { deaplist: [], // deaplist1: [{deptname: '第十一监察检查室'},{deptname: '驻苏州银行组'}... defaultProps: { label: 'deptname', id: 'deptid' }, } }
methods:
handleNodeClick(data, checked, node) { console.log('多选框设为单选框', checked, data) console.log('data.id: ' + data.deptid) console.log('data: ' + JSON.stringify(data)) // console.log(this.$refs.treeFrom.current-node-key) if (checked) { this.$refs.treeForm.setCheckedKeys([data.deptid]) } console.log('getCheckedKeys' + this.$refs.treeForm.getCheckedKeys([data.deptid])) }, changetree(data, lst) { console.log('lst: ' + JSON.stringify(lst)) console.log(lst.checkedKeys.length) if (lst.checkedKeys.length == 0) { //这里的treeForm是你el-tree命名的ref的值 this.$refs.treeForm.setCheckedKeys([data.deptid]) } this.getRightList() },
解决 无用评论 打赏 举报
悬赏问题
- ¥15 编辑cmake lists 明明写了project项目名,但是还是报错怎么回事
- ¥15 关于#计算机视觉#的问题:求一份高质量桥梁多病害数据集
- ¥15 特定网页无法访问,已排除网页问题
- ¥50 如何将脑的图像投影到颅骨上
- ¥15 提问一个关于vscode相关的环境配置问题,就是输入中文但是显示不出来,代码在idea可以显示中文,但在vscode不行,不知道怎么配置环境
- ¥15 netcore使用PuppeteerSharp截图
- ¥20 这张图页头,页脚具体代码该怎么写?
- ¥15 关于#sql#的问题,请各位专家解答!
- ¥20 WPF MVVM模式 handycontrol 框架, hc:SearchBar 控件 Text="{Binding NavMenusKeyWords}" 绑定取不到值
- ¥15 需要手写数字信号处理Dsp三个简单题 不用太复杂