Element Ui Tree树形控件中动态设置已选中项

2018-04-10阅读(27570)评论(0)牵着狗狗看MM

苏州实时公交查询

[js]<el-tree ref="tree" :data="resourceData" show-checkbox node-key="id" :default-checked-keys="resourceCheckedKey" :props="resourceProps"></el-tree>

data() {
return {
resourceData: [],//数组,我这里是通过接口获取数据,
resourceDialogisShow: false,
resourceCheckedKey: [],//通过接口获取的需要默认展示的数组 [1,3,15,18,…]
resourceProps: {
children: "subArr",
label: "chineseName"
}
};
},

methods: {
getKey(id) {
let that = this;
let params = {
roleId: id
};
that.$get(this.$api.getConfigure(), params, function (res) {
if (res.code == "0000") {
if (res.result) {
let data = res.result;
let arr = [];
for (let item of data) {
arr.push(item.id)
}

that.$refs.tree.setCheckedKeys(arr);//获取已经设置的资源后渲染
}

}
});
}
}

[/js]

名词解释

这里照搬官网的说明。
Attributes

参数 说明 类型 可选值 默认值
default-expanded-keys 默认展开的节点的 key 的数组 array

props

参数 说明 类型 可选值 默认值
label 指定节点标签为节点对象的某个属性值 string, function(data, node)
children 指定子树为节点对象的某个属性值 string

方法

方法名 说明 参数
setCheckedKeys 通过 keys 设置目前勾选的节点,使用此方法必须设置 node-key 属性 (keys, leafOnly) 接收两个参数,1. 勾选节点的 key 的数组 2. boolean 类型的参数,若为 true 则仅设置叶子节点的选中状态,默认值为 false

划重点

ref="tree" 这个一定要设置,不然你会发现打印this.$refs.treeundefined,并且也没法调用setCheckedKeys方法

赞(2) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » Element Ui Tree树形控件中动态设置已选中项
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏