
<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