自定义ElementUI风格树形组件，详解递归组件的使用及事件数据传递，视图更新等问题
组件视图样式
当我们做多级菜单或者权限列表管理的时候，大多会采用树形结构来实现，有的朋友为了省事，不想多费脑力，多费时间，直接几层for循环就做了个差不多的树形组件，更省事的朋友直接拿ElementUI中的Tree树形组件来完成需求，这时，稍微有点要求的产品就来要求了：不行，这组件样式都是竖着的，要是权限列表多了，这还了得？改。
这里笔者仿照ElementUI的风格，自定义了个简单的树形组件，先看样式：
递归组件说明
什么是递归组件？简单的说就是组件自己调用自己。有些朋友可能就懵了，哎呦卧槽，组件还能调用自己？这么牛X？对，就是这么牛X。
咱们先不谈如何实现，先看工作中会碰到的一种需求。
看如下示例数据：
list: [
{
id: "1",
label: "一级菜单1",
checked: false,
children: [
{
id: "11",
label: "二级菜单1",
checked: false,
children: [
{
id: "111",
label: "三级菜单1",
checked: false,
},
],
},
{
id: "12",
label: "二级菜单2",
checked: false,
children: [
{
id: "121",
label: "三级菜单1",
checked: false,
},
{
id: "122",
label: "三级菜单2",
checked: false,
},
],
},
],
},
],
按照以上数据来实现视图，很多朋友一看这有啥难度，然后直接上手写代码，最终写了如下代码：
<div class="example">
<div v-for="item in list" :key="item.id" class="example-item">
<el-checkbox v-model="item.checked">{{item.label}}</el-checkbox>
<div v-for="it in item.children" :key="it.id" class="example-item">
<el-checkbox v-model="it.checked">{{it.label}}</el-checkbox>
<div v-for="i in it.children" :key="i.id" class="example-item">
<el-checkbox v-model="it.checked">{{i.label}}</el-checkbox>
</div>
</div>
</div>
</div>
这么简答的需求我要是做不出来，那简直是侮辱我80的智商。这时，有朋友瞪着眼睛多看了两眼，咦？我瞅着怎么这代码结构好像有规律可循？这要是多几层数据，我岂不是要继续重复嵌套下去？咱是有水平的程序员，怎么能总是干这种重复的事情呢？
于是，递归的思想冒出来了，我可以把上述代码的基本结构抽离出来，成一个组件，然后让这个组件嵌套调用自己，这样无论有多少层数据，我都不用担心了。
请看如下：
创建ExmapleItem.vue
<template>
<div class="example-item">
<el-checkbox v-model="item.checked">{{item.label}}</el-checkbox>
<div v-if="item.children">
<example-item v-for="it in item.children" :key="it.id" :item="it"></example-item>
</div>
</div>
</template>
<script>
export default {
name: "example-item",
props:{
item: {
type: Object,
}
}
}
</script>
上述示例代码是递归组件的一个子项，咱们要实现上述list数据内容，还需要另外创建一个组件，在这个组件引入递归组件，这么使用：
<example-item v-for="item in list" :key="item.id" :item="item"></example-item>
以上简单示例就实现了一个简单的递归组件方案，这里需要重点说明的一点就是，在组件内部要加上name名称，该名称写的是什么，递归调用的组件名称就是什么，注意递归组件内部数据的传递参数要保持一致。
自定义CTree树形组件
上述示例看明白了，递归组件也明白了，那么，就可以进行自定义树形组件的开发工作。
不想看下面内容的朋友，可以直接点此下载完整内容。
新建一个CTree文件夹，在内部创建两个文件index.vue和CTreeItem.vue。
index.vue
<template>
<div class="c-tree-component">
<c-tree-item v-for="item in tree" :key="item.value" :treeObj="item" :size="size"></c-tree-item>
</div>
</template>
<script>
import treeStore from "./tree-store";
import CTreeItem from "./CTreeItem.vue";
export default {
name: "CTree",
data() {
return {
tree: [],
};
},
props: {
data: {
type: Array,
default: [],
},
size: {
type: String,
default: "normal", // small 小
},
mode: {
type: String,
default: "normal", // auth 权限模式，此模式下，子组件被选中，父组件一定被选中
},
expanded: {
type: Boolean,
default: true,
},
},
mounted() {
this.tree = this.initData(this.data);
// 组件事件监听，监听子组件状态变化，获取和更改父组件数据
treeStore.$on("tree-change", (res) => {
// res当前点击项的数据
// 如果当前模式为auth，执行auth模式组件选择方式
if (this.mode === "auth") {
let result = this.reInitParentCheck(this.tree, res.value);
this.tree = result.data;
} else {
// 拿到更新后的部分数据，normal模式下，子组件的check随父组件变化
res = this.updateSonCheck(res, res.checked);
// 更新数据，同步显示组件样式
this.tree = this.updateData(this.tree, res);
// 更新数据，更新所有checkBox状态
this.tree = this.reInitCheck(this.tree);
}
// console.log(this.tree);
// 向外部引用父组件传递选中的value值
let result = this.getAllValue(this.tree);
this.$emit("change", result);
// console.log(result);
});
},
methods: {
/**
* 采用递归方式重新修改data数据
* 方便组件进行选中，展开等操作
*/
initData(e) {
let temp = [];
e.forEach((ele) => {
if (ele.children && ele.children.length > 0) {
ele.children = this.initData(ele.children);
}
temp.push({
...ele,
checked: false, // 是否选中
expanded: this.expanded, // 是否展开
indeterminate: false, // checkBox的中间态
});
});
return temp;
},
/**
* 更新全部数据内容
*/
updateData(e, target) {
let isFind = false;
e.forEach((ele) => {
if (ele.value === target.value) {
ele = target;
isFind = true;
}
});
if (!isFind && e.children && e.children.length > 0) {
e.children = this.updateData(e.children, target);
}
return e;
},
/**
* 更新数据的check状态
* 判断是否有children，如果有，全部更新为父级数据的check状态
*/
updateSonCheck(e, checked) {
if (e.children && e.children.length > 0) {
e.children.forEach((i) => {
i.checked = checked;
if (i.children && i.children.length > 0) {
i = this.updateSonCheck(i, checked);
}
});
}
e.checked = checked;
return e;
},
/**
* 更新全部数据的视图check状态
* none all half
*/
reInitCheck(e) {
e.forEach((ele) => {
if (ele.children && ele.children.length > 0) {
ele.children = this.reInitCheck(ele.children);
let res = "";
res = this.getNodeStatus(ele.children);
if (res === "none") {
ele.checked = false;
ele.indeterminate = false;
} else if (res === "all") {
ele.checked = true;
ele.indeterminate = false;
} else if (res === "half") {
ele.checked = false;
ele.indeterminate = true;
}
}
});
return e;
},
/**
* 更新全部父级数据的视图check状态
* mode为auth模式时，调用此方法
* 根据当前级别所有项check状态更新父组件check状态
* 父组件check不影响子组件，子组件check必定更新父组件check
*/
reInitParentCheck(e, current) {
let isChecked = false;
for (let i = 0; i < e.length; i++) {
let ele = e[i];
// 如果遍历选项与当前操作项的value相等，将所有子项置为同样状态
if (ele.value === current) {
// 更新所有子项数据
ele = this.updateSonCheck(ele, ele.checked);
// 如果当前操作项check为true，将标记isChecked置为true，表示当前级别有选中项
if (ele.checked) {
isChecked = true;
continue;
}
}
if (ele.children && ele.children.length > 0) {
let res = this.reInitParentCheck(ele.children, current);
ele.children = res.data;
ele.checked = res.isChecked;
}
if (ele.checked) {
isChecked = true;
}
}
return {
data: e,
isChecked: isChecked,
};
},
/**
* 获取每一节点的状态，用于更新checkBox中间态
* 如果该节点所有同级checkBox都被选中，返回all
* 0个选中，返回none
* 其余情况返回half
*/
getNodeStatus(e) {
let checkedNum = 0;
e.forEach((ele) => {
if (ele.checked) {
++checkedNum;
}
});
if (checkedNum === 0) {
return "none";
} else if (checkedNum === e.length) {
return "all";
} else {
return "half";
}
},
/**
* 获取所有被选中项的value
*/
getAllValue(e) {
let temp = [];
e.forEach((ele) => {
if (ele.checked) {
temp.push(ele.value);
}
if (ele.children && ele.children.length > 0) {
let res = this.getAllValue(ele.children);
temp = temp.concat(res);
}
});
return temp;
},
},
components: {
CTreeItem,
},
};
</script>
CTreeItem.vue
<template>
<div class="c-tree" @click.stop="_handleClick">
<div class="c-tree-level" :style="{height:size=='small'?'26px':'40px'}">
<i class="el-icon-caret-right c-tree-level-icon"></i>
<el-checkbox @click.native.stop v-model="obj.checked" :indeterminate="obj.indeterminate" @change="_handleChange"></el-checkbox>
<span>{{obj.label}}</span>
</div>
<el-collapse-transition>
<div v-if="obj.children" v-show="obj.expanded" class="c-tree-level-child" :class="{'level-last':!obj.children[0].children}">
<c-tree-item v-for="it in obj.children" :key="it.value" :treeObj="it" :size="size"></c-tree-item>
</div>
</el-collapse-transition>
</div>
</template>
<script>
import treeStore from "./tree-store";
export default {
name: "CTreeItem",
data() {
return {
obj: {
children: [],
checked: false,
expanded: false,
},
};
},
props: {
treeObj: {
type: Object,
},
size: {
type: String,
default: "normal", // small 小
},
},
watch: {
"treeObj.checked": function (e) {
this.obj = this.treeObj;
},
},
created() {
this.obj = this.treeObj;
},
methods: {
/**
* 点击操作，控制展开和收缩，并更新父组件数据
*/
_handleClick() {
// 修改当前点击项的收缩展开状态
this.obj.expanded = !this.obj.expanded;
this._handleChange();
},
/**
* checkBox数据修改监听
* 更新局部组件视图，将更新的组件状态传给父组件
*/
_handleChange() {
this.$nextTick(() => {
treeStore.$emit("tree-change", this.obj);
});
},
},
};
</script>
<style lang="scss" scoped>
.c-tree {
&-level {
display: flex;
align-items: center;
cursor: pointer;
height: 40px;
&:hover,
&.focus {
background-color: #f5f7fa;
}
&.expanded {
.c-tree-level-icon {
transform: rotate(90deg);
}
}
&-icon {
color: #c0c4cc;
font-size: 12px;
transition: 0.3s;
transform: rotate(0deg);
padding: 6px;
}
.el-checkbox {
margin-right: 8px;
}
&-child {
margin-left: 24px;
&.level-last {
display: flex;
align-items: center;
.c-tree-level {
padding-right: 12px;
margin-right: 24px;
&-icon {
color: transparent;
}
}
}
}
}
}
</style>
递归组件事件传递
在递归组件中，寻常使用的this.$emit()就无法生效，我们这里可以采用eventBus方案来实现，有朋友可能疑惑：eventBus是个啥玩意？你就当它是一种解决方案就可以，方法很简单，另外创建一个Vue实例，让emit和on绑定同一个实例就可以在递归组件内部发送事件了。
如上述代码中的tree-store.js.
import Vue from 'vue';
export default new Vue();
外部按照正常组件引用方式，引入index.vue组件就可以。
<c-tree :data="tree" mode="auth" :expanded="true"></c-tree>
本组件提供了两种mode，默认“normal”，checkBox有中间态，子组件不全部选中情况下，父组件check状态为false，“auth”为权限列表选择模式，一旦子组件有选中项，父组件一定为选中状态。
expanded控制是否展开。
size：默认normal，间隔较大，如上图所示，“small”表示各级之间间隔较小，表现形式如同ElementUI中的tree组件。
直接使用本案例的朋友这里要注意一点，外部传入数据可以按照如下方式传入，label表示名称，value表示key或者id等：
示例参数：
tree: [
{
label: "一级1",
value: "level_1",
children: [
{
label: "二级1",
value: "level_1_1",
children: [
{
label: "三级1",
value: "level_1_1_1",
},
{
label: "三级2",
value: "level_1_1_2",
},
],
},
{
label: "二级2",
value: "level_1_2",
children: [
{
label: "三级2-1",
value: "level_1_2_1",
},
{
label: "三级2-2",
value: "level_1_2_2",
},
{
label: "三级2-3",
value: "level_1_2_3",
},
],
},
{
label: "二级3",
value: "level_1_3",
children: [
{
label: "三级3-1",
value: "level_1_3_1",
},
{
label: "三级3-2",
value: "level_1_3_2",
},
{
label: "三级3-3",
value: "level_1_3_3",
},
{
label: "三级3-4",
value: "level_1_3_4",
},
],
},
],
},
{
label: "一级2",
value: "level_2",
children: [
{
label: "二级2-1",
value: "level_2_1",
children: [
{
label: "三级2-1-1",
value: "level_2_1_1",
},
],
},
],
},
],
el-collapse-transition不生效问题
细心的朋友会发现，上述代码中用到了el-collapse-transition标签，这是ElementUI提供的内置过度动画中的一个标签，用来进行展开折叠操作。
有朋友自己写组件用到了此标签，引用后发现不生效，并没有展开折叠的动效。
解决方法：
1.用一个单独的简单示例操作此标签，查看是否生效，如果生效，说明问题出在你引用此标签的组件内。
2.检查组件的最外层div是否有v-if操作，如果有，干掉，再次检查是否生效。
el-collapse-transition标签的外层，最好不要有v-if操作，尤其是当你采用了局部视图更新方案时，此标签会因为视图更新失效。
点此下完源码资源
欢迎关注本博主：小圣贤君，有问题可以留言哦~