当前位置: 首页 > 工具软件 > REE > 使用案例 >

VUE elementUI el-ree 树形控件之回显数据

通沛
2023-12-01

背景: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 所指内容

以上完结。

 类似资料: