vue3项目中用v-for循环出来的el-tree如何实现全选和全不选功能

Question

vue3项目中用v-for循环出来的el-tree如何实现全选和全不选功能

Answer 1

• 这个问题的回答你可以参考下: 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()
        },