
<el-tree v-if="showTree" :data="date" show-checkbox node-key="id" ref="tree" check-strictly :highlight-current='true' :check-on-click-node="true" :accordion="true" :default-checked-keys="[checkedkey]" :default-expanded-keys="checkedkey" :props="defaultProps" :default-expand-all="false" @check-change="parentModules" @check="currentChecked" ></el-tree>
date: [ { moduldCode: 1, jgmc: '一级 2', disabled:true, children: [{ moduldCode: 3, jgmc: '二级 2-1', disabled:true, children: [{ moduldCode: 4, jgmc: '三级 3-1-1' }, { moduldCode: 5, jgmc: '三级 3-1-2', }] }, { moduldCode: 2, jgmc: '二级 2-2', disabled:true, children: [{ moduldCode: 6, jgmc: '三级 3-2-1' }, { moduldCode: 7, jgmc: '三级 3-2-2', }] }] } ], checkedkey: [], defaultProps: { // children: "child", // label: "moduleName", label: "jgmc", // id:'moduldCode' //可要可不要 }, // 取uniqueValue值的时候,列:uniqueValue[0]否则会是一个数组 uniqueValue:'',//最后拿到的唯一选择的moduldCode值,相当于id showTree:false methods: { currentChecked (nodeObj, SelectedObj) { console.log(SelectedObj) console.log(SelectedObj.checkedKeys) // 这是选中的节点的key数组 console.log(SelectedObj.checkedNodes) // 这是选中的节点数组 }, //节点选择状态发生改变时 parentModules(data,checkbox,node){ if(checkbox){ // 注意:后端返回的node-key不是id,是moduldCode this.$refs.tree.setCheckedKeys([data.id]); //data.moduldCode 根据自己需求改,我这个是moduldCode,上面data配置中我已经修改了的 this.uniqueValue = this.$refs.tree.getCheckedKeys().toString(); //不加上toString()会报:期望一个数字或者字符串,结果返回的是数组 }else{ this.uniqueValue = this.$refs.tree.getCheckedKeys().toString(); if(this.uniqueValue.length == 0){ this.uniqueValue = '' } } }, }
指定默认被选中项目:
checkedkey: ['id'] //
初始化:不展开,都不被选中
this.$nextTick(function (){ this.checkedkey = []; this.showTree = true })
参考:https://www.cnblogs.com/tlfe/p/11693772.html
http://hanwenblog.com/post/20.html