VUE elementUI el-ree 树形控件之回显数据
背景:el-ree 树形控件回显数据的问题,在网上有很多坑,也有许多对这个问题的解决方案及代码,但大都说的不明白本解决方案如下:直接上代码:VIEW:<el-form :model="selForm" ref="selForm" label-width="0px" class="demo-ruleForm"><el-form-item><el-col :span="8
背景: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 所指内容
以上完结。
更多推荐
所有评论(0)