element tree ui 全选_关于element-ui的tree组件使用与修改

element-ui 目前基本成为前端pc网页端标准ui框架，但是目前element-ui研发团队已经停止element-ui 的更新，但是在业务需求在不断更新，逻辑不断加强，页面不断优化中，element-ui中就有很多组件满足不了开发者的需要，今天我就以我们项目的tree需求跟小伙伴们讨论一下。

element-ui的组件是这样的，只是单纯的用

defaultProps: {

children: 'children',

label: 'label' }

+ filterText(val) {

this.$refs.tree.filter(val);

}

实现监听筛选功能，但是我们的业务需求数据有三种不同的下级菜单数据，而且每个下级菜单里面的参数还有不同的status，要根据不同的参数显示不同的图片做图标。

功能图如下：

我们后台返回的数据结构是这样的：

有俩种不同的数据返回，每种下级数据里面还有俩种类型：

为了解析数据为tree框架的格式，我用了多个for循环，一个递归函数，共俩个函数：

递归函数，原来同上

这就实现了tree下级不同数组时处理方案,以下是我的HTML代码：

还有tree各种操作对应的函数，在线，离线的筛选，标题的筛选

代码如下，希望能帮到你：

<template>