目录
el-tree
用来展示树型结构的信息，具备展开和折叠的功能。通过案例介绍相关知识点内容，案例实现的功能如下：
1、获取选中
可通过node和key(el-tree中需设置node-key，一般为id)获取选中的节点
设置默认选中id=1的节点
getCheckedNodes 若节点可被选择（即 show-checkbox为true），则返回目前被选中的节点所组成的数组(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false2. 是否包含半选节点，默认值为false
getCheckedKeys 若节点可被选择（即 show-checkbox为true），则返回目前被选中的节点的 key 所组成的数组(leafOnly) 接收一个 boolean 类型的参数，若为 true则仅返回被选中的叶子节点的 keys，默认值为false
// 1.通过node获取
console.log("通过node获取", this.$refs.tree.getCheckedNodes());
// 2.通过key获取
console.log("通过key获取", this.$refs.tree.getCheckedKeys());
2、设置选中
可通过node和key(el-tree中需设置node-key，一般为id)设置选中的节点。
setCheckedNodes 设置目前勾选的节点，使用此方法必须设置 node-key 属性 (nodes) 接收勾选节点数据的数组
this.$refs.tree.setCheckedNodes([
{ id: 2, label: "一级 2" },
{
id: 7,
label: "二级 3-1"
}
]);
setCheckedKeys 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true则仅设置叶子节点的选中状态，默认值为false
this.$refs.tree.setCheckedKeys([5, 8]);3、全选、清空
①遍历所有的节点，并设置其checked属性为true或false
// 获取根节点
let rootNode = this.$refs.tree.getNode(this.treeData[0].id).parent;
travelNodes(rootNode);
function travelNodes(tmpRoot) {
// 选中该节点
tmpRoot.checked = true;
// 叶子节点
if (tmpRoot.childNodes.length === 0) {
return;
}
// 不是叶子节点,递归遍历
else {
let tmpChildNoes = tmpRoot.childNodes;
for (let i = 0; i < tmpChildNoes.length; i++) {
travelNodes(tmpChildNoes[i]);
}
}
}②通过设置node或key
注意：当el-tree设置check-strictly时，通过setCheckedNodes全选方法失效，父子不关联，只能选中一级父节点；通过key方法需要遍历获得key。
//全选
this.$refs.tree.setCheckedNodes(this.treeData);
// this.$refs.tree.setCheckedKeys([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
//清空
// this.$refs.tree.setCheckedNodes([]);
this.$refs.tree.setCheckedKeys([]);4、展开收缩
遍历所有的节点，并设置其expanded属性为true或false
for (let i = 0; i < this.treeData.length; i++) {
this.$refs.tree.store.nodesMap[this.treeData[i].id].expanded = true;
}5、完整代码
<template>
<div class="hello">
<h1>el-tree基本功能</h1>
<el-tree
ref="tree"
:data="treeData"
show-checkbox
node-key="id"
@node-click="handleNodeClick"
@check-change="handleCheckChange"
:default-checked-keys="[1]"
default-expand-all
:props="defaultProps"
check-strictly
></el-tree>
<div class="btn">
<el-button size="mini" type="primary" @click="getChecked">获取选中</el-button>
<el-button size="mini" type="primary" @click="setChecked">设置选中</el-button>
<el-button size="mini" type="primary" @click="selectAllNodes">全选</el-button>
<el-button size="mini" type="primary" @click="clearAllNodes">清空</el-button>
<el-button size="mini" type="warning" @click="handleSelectAll">全选/清空</el-button>
<el-select size="mini" v-model="value" @change="selectChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
</div>
</template>
<script>
export default {
name: "hello",
data() {
return {
defaultProps: {
children: "childList",
label: "label"
},
treeData: [
{
id: 1,
label: "一级 1",
childList: [
{
id: 4,
label: "二级 1-1",
childList: [
{
id: 9,
label: "三级 1-1-1"
},
{
id: 10,
label: "三级 1-1-2"
}
]
}
]
},
{
id: 2,
label: "一级 2",
childList: [
{
id: 5,
label: "二级 2-1"
},
{
id: 6,
label: "二级 2-2"
}
]
},
{
id: 3,
label: "一级 3",
childList: [
{
id: 7,
label: "二级 3-1"
},
{
id: 8,
label: "二级 3-2"
}
]
}
],
options: [
{
value: "1",
label: "展开所有"
},
{
value: "2",
label: "收合所有"
}
],
value: "展开所有",
checkAll: false
};
},
methods: {
handleNodeClick(data) {
// console.log(data);
this.$refs.tree.getCheckedKeys();
},
handleCheckChange(data, checked, indeterminate) {
// console.log(data, checked, indeterminate);
},
//获取选中
getChecked() {
// 1.通过node获取
console.log("通过node获取", this.$refs.tree.getCheckedNodes());
// 2.通过key获取
console.log("通过key获取", this.$refs.tree.getCheckedKeys());
},
// 设置选中
setChecked() {
// 1.通过node设置
this.$refs.tree.setCheckedNodes([
{ id: 2, label: "一级 2" },
{
id: 7,
label: "二级 3-1"
}
]);
// 2.通过key设置
// this.$refs.tree.setCheckedKeys([5, 8]);
},
// 全选
selectAllNodes: function() {
// 获取根节点
let rootNode = this.$refs.tree.getNode(this.treeData[0].id).parent;
travelNodes(rootNode);
function travelNodes(tmpRoot) {
// 选中该节点
tmpRoot.checked = true;
// 叶子节点
if (tmpRoot.childNodes.length === 0) {
return;
}
// 不是叶子节点,递归遍历
else {
let tmpChildNoes = tmpRoot.childNodes;
for (let i = 0; i < tmpChildNoes.length; i++) {
travelNodes(tmpChildNoes[i]);
}
}
}
},
// 清空
clearAllNodes: function() {
this.$refs.tree.setCheckedKeys([]);
},
// 全选/清空
//当el-tree设置check-strictly时，通过setCheckedNodes全选方法失效，父子不关联，只能选中一级父节点
handleSelectAll() {
if (this.checkAll == false) {
this.$refs.tree.setCheckedNodes(this.treeData);
// this.$refs.tree.setCheckedKeys([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
this.checkAll = true;
} else {
// this.$refs.tree.setCheckedNodes([]);
this.$refs.tree.setCheckedKeys([]);
this.checkAll = false;
}
},
// 展开收合
selectChange(value) {
if (value == 1) {
// 展开所有
for (let i = 0; i < this.treeData.length; i++) {
this.$refs.tree.store.nodesMap[this.treeData[i].id].expanded = true;
}
} else if (value == 2) {
// 收合所有
for (let i = 0; i < this.treeData.length; i++) {
this.$refs.tree.store.nodesMap[this.treeData[i].id].expanded = false;
}
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
width: 600px;
border: 1px solid rgb(209, 203, 203);
border-radius: 6px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
.btn {
margin-top: 20px;
}
.el-select {
margin-left: 10px;
width: 120px;
}
</style>