Web前端(W3Cways.com) - Web前端学习之路
<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);//获取已经设置的资源后渲染
}
}
});
}
}
名词解释
这里照搬官网的说明。
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.tree 为undefined,并且也没法调用setCheckedKeys方法
