vue中el-tree默认选中节点问题

vue中el-tree默认选中节点问题

---

前言

最近用到了el-tree这个组件，要求全部树结构默认展开和默认全选

---

一、el-tree默认选中

1.使用方法

el-tree自带有默认展开的属性default-checked-keys，这个属性对应的是个数组，里面的参数是对应node-key的内容，就如同下图里面的例子

   <el-tree
    :data="treelist"
    :props="defaultProps"
    :default-checked-keys="defaultTree"
    node-key="resultCode"
    ref="tree"
    show-checkbox
	</el-tree>
<script>
export default {
data(){
	return{
	treelist:[{
	resultCode:'0',
	resultMsg:'1',
	list:[
	{
	resultCode:'00',
	resultMsg:'11',
	list:[]
	},
	{
	resultCode:'02',
	resultMsg:'12',
	list:[]
	},
	]
	}],
	defaultTree:['0','01','02'],
	defaultProps:{
        children: "list",
        label: "resultMsg",
	}
	}
},

}
</script>

二、递归接口函数

因为树结构里面的参数大部分通过接口返回的数据组合而成的，而不是直接写好的，所以这就要用到递归把树结构里面的resultCode全部提取出来放到defaultTree里面

    setTree(datas) {
      for (var i in datas) {
        this.defaultTree.push(datas[i].resultCode);
        if (datas[i].list.length != 0) {
          this.setTree(datas[i].list);
        }

      }
    },

2.页面渲染

这时会发现一个问题，就是树没有打勾，这是因为虽然defaultTree里面有了参数，但是这个树不会实时渲染，要等到下一次的dom节点渲染时才会显示出来，把上面那个代码改成下面这个样子，加一个实时刷新的函数

    setTree(datas) {
      for (var i in datas) {
        this.defaultTree.push(datas[i].resultCode);
        if (datas[i].list.length != 0) {
          this.setTree(datas[i].list);
        }
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(this.defaultTree);
        });
      }
    },