VUE elementUI el-ree 树形控件之回显数据_element-ui的el-tree组件

背景：el-ree 树形控件回显数据的问题，在网上有很多坑，也有许多对这个问题的解决方案及代码，但大都说的不明白

本解决方案如下：

直接上代码：

VIEW：

<el-form :model="selForm" ref="selForm" label-width="0px" class="demo-ruleForm">
    <el-form-item>
        <el-col :span="8">
                  <el-tree class="flow-tree"
      :data="groupTreeData"
      :props="defaultProps"
                          show-checkbox
      node-key="code"
      ref="tree"
      :default-expand-all="true"
      :expand-on-click-node="false"
      :default-checked-keys="[resourceCheckedKey]"
      v-loading="loadingFunction">
                  </el-tree>
        </el-col>
    </el-form-item>
</el-form>

关键点示意：

数据示例：[{"code":"10001","name":"北京"}]

a、node-key="code"  索引绑定字段，此 code 要与绑定的数据的参数字段一致

b、ref="tree" 指定的绑定控件名

c、:default-checked-keys="[resourceCheckedKey]"  绑定的回显数组数据，resourceCheckedKey 索引数组值，即 code 值

d、:data="groupTreeData"  绑定的数组数据

DATA定义：

data(){

.......

loadingFunction: false,
defaultProps: { "id": "code", "label": 'name', "children": 'children' },
groupTreeData: [],//此定义一定要为空，否则不能回显数据
resourceCheckedKey: [],

},
methods: {

bindCheckedFunction() {//绑定已有数据
   this.loadingFunction = true;
   var obj = {
      id: this.infoid
   }
   getDataList(obj).then(res => {
      if (res.code == 0 && res.data != "") {
         this.resourceCheckedKey = res.data;
         let that = this;
         setTimeout(function() {
            res.data.forEach(value => {
               that.$refs.tree.setChecked(value.code, true, false);
            });
         }, 500);
         this.$refs.tree.setCheckedKeys(this.resourceCheckedKey)
      } else {
         this.resourceCheckedKey = [];
         this.$refs.tree.setCheckedKeys(this.resourceCheckedKey)
      }
      this.loadingFunction = false;
   });
}

...................

}

数据示意：this.$refs.tree  的 tree 即为 VIEW中的 b 所指内容

以上完结。