自定义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操作，尤其是当你采用了局部视图更新方案时，此标签会因为视图更新失效。

点此下完源码资源

欢迎关注本博主：小圣贤君，有问题可以留言哦~