关于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各种操作对应的函数，在线，离线的筛选，标题的筛选

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

data(){

return{

filterText: "",

      ev: false,

      data2: [],

      defaultProps: {

        children: "GroupSon",

        label: "GroupName"

      },

}

},

 watch: {

    // tree 树节点筛选

    filterText(val) {

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

    }

  },

methods:{

//优化之后的代码 不管有几级都可以适用

    filterNode(value, data, node) {

      if (!value) {

        return true;

      }

      let level = node.level;

      let _array = []; //这里使用数组存储 只是为了存储值。

      this.getReturnNode(node, _array, value);

      let result = false;

      _array.forEach(item => {

        result = result || item;

      });

      return result;

    },

    // 筛选树节点

    getReturnNode(node, _array, value) {

      if (typeof value == "number") {

        if (value === 6) {

          if (

            (node.data && node.data.Status === 1) ||

            (node.data && node.data.Status === 2) ||

            (node.data && node.data.Status === 4)

          ) {

            var isPass = true;

          }

        } else if (value === 7) {

          if (

            (node.data && node.data.Status === 3) ||

            (node.data && node.data.Status === 2)

          ) {

            var isPass = true;

          }

        } else if (node.data && node.data.Status === value) {

          var isPass = true;

        }

      } else {

        var isPass =

          node.data &&

          node.data.GroupName &&

          node.data.GroupName.indexOf(value) !== -1;

      }

      isPass ? _array.push(isPass) : "";

      this.index2++;

      if (!isPass && node.level != 1 && node.parent) {

        this.getReturnNode(node.parent, _array, value);

      }

    },

    // 左侧菜单状态变化

    sta(index, data) {

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

      // this.$refs.tree.filter(index);

    },

    //  数据去重

    arrayUnique2(arr, name) {

      var hash = {};

      return arr.reduce(function(item, next) {

        hash[next[name]] ? "" : (hash[next[name]] = true && item.push(next));

        return item;

      }, []);

    },

//   左侧列表右键操作

    defence(i) {

      if (!this.list.EquipmentIdString) {

        this.$message("只能操作有设备ID的终端!");

        return false;

      }

      this.$axiosPost(this.$api.action, {

        ActionType: i,

        EquipmentIdString: this.list.EquipmentIdString,

        TerminalId: this.list.GroupId

      }).then(res => {

        if (res.Code === 200) {

          this.$message({

            message: res.Msg,

            type: "success"

          });

        } else {

          this.$message(res.Msg);

        }

      });

    },

// 数据处理

    gu2(list) {

      if (list.Terminals) {

        for (var p = 0; p < list.Terminals.length; p++) {

          var a = list.Terminals[p].Videos

            ? list.Terminals[p].Videos.length

            : 0;

          for (var s = 0; s < list.Terminals[p].Videos.length; s++) {

            var ship = {};

            list.Terminals[p].GroupSon = [];

            ship.GroupId = list.Terminals[p].Videos[s].VedioId;

            ship.GroupName = list.Terminals[p].Videos[s].VedioName;

            ship.Type = list.Terminals[p].Videos[s].Type;

            list.Terminals[p].GroupSon.push(ship);

          }

          if (list.Terminals[p].Status === 1) {

            this.bufang++;

          } else if (list.Terminals[p].Status === 3) {

            this.lixian++;

          } else if (list.Terminals[p].Status === 2) {

            this.chefang++;

          } else if (list.Terminals[p].Status === 4) {

            this.liushou++;

          }

          var data = {};

          data.GroupId = list.Terminals[p].TerminalId;

          data.GroupName = list.Terminals[p].TerminalName;

          data.Type = list.Terminals[p].Type;

          data.GroupSon = list.Terminals.GroupSon;

          data.state = 1;

          data.Lng = list.Terminals[p].Lng;

          data.Lat = list.Terminals[p].Lat;

          data.Status = list.Terminals[p].Status;

          data.EquipmentIdString = list.Terminals[p].EquipmentIdString;

          list.GroupSon.push(data);

        }

      }

      if (list.GroupSon) {

        for (var n = 0; n < list.GroupSon.length; n++) {

          if (!list.GroupSon.state) {

            this.gu2(list.GroupSon[n]);

          }

        }

      }

    },

    // 左侧菜单栏

    leftgroup() {

      this.$axiosPost(this.$api.leftgroup).then(res => {

        if (res.Code === 200) {

          var data3 = {

            GroupId: 0,

            GroupName: "终端数据",

            Type: 1,

            GroupSon: []

          };

          this.data2 = res.Data.GroupData;

          for (var i = 0; i < this.data2.length; i++) {

            if (this.data2[i].Status === 1) {

              this.bufang++;

            } else if (this.data2[i].Status === 3) {

              this.lixian++;

            } else if (this.data2[i].Status === 2) {

              this.chefang++;

            } else if (this.data2[i].Status === 4) {

              this.liushou++;

            }

            if (this.data2[i].Terminals) {

              for (var p = 0; p < this.data2[i].Terminals.length; p++) {

                for (

                  var s = 0;

                  s < this.data2[i].Terminals[p].Videos.length;

                  s++

                ) {

                  var ship = {};

                  this.data2[i].Terminals[p].GroupSon = [];

                  ship.GroupId = this.data2[i].Terminals[p].Videos[s].VedioId;

                  ship.GroupName = this.data2[i].Terminals[p].Videos[

                    s

                  ].VedioName;

                  ship.Type = this.data2[i].Terminals[p].Videos[s].Type;

                  this.data2[i].Terminals[p].GroupSon.push(ship);

                }

                if (this.data2[i].Terminals[p].Status === 1) {

                  this.bufang++;

                } else if (this.data2[i].Terminals[p].Status === 3) {

                  this.lixian++;

                } else if (this.data2[i].Terminals[p].Status === 2) {

                  this.chefang++;

                } else if (this.data2[i].Terminals[p].Status === 4) {

                  this.liushou++;

                }

                var data2 = {};

                data2.GroupId = this.data2[i].Terminals[p].TerminalId;

                data2.GroupName = this.data2[i].Terminals[p].TerminalName;

                data2.Type = this.data2[i].Terminals[p].Type;

                data2.state = 1;

                data2.Lng = this.data2[i].Terminals[p].Lng;

                data2.Lat = this.data2[i].Terminals[p].Lat;

                data2.Status = this.data2[i].Terminals[p].Status;

                data2.EquipmentIdString = this.data2[i].Terminals[

                  p

                ].EquipmentIdString;

                data2.GroupSon = this.data2[i].Terminals[p].GroupSon;

                this.data2[i].GroupSon.push(data2);

              }

            }

            for (var n = 0; n < this.data2[i].GroupSon.length; n++) {

              if (!this.data2[i].GroupSon.state) {

                this.gu2(this.data2[i].GroupSon[n]);

              }

            }

          }

          for (var o = 0; o < res.Data.TerminalData.length; o++) {

            var data = {};

            data.GroupId = res.TerminalData[o].TerminalId;

            data.GroupName = res.TerminalData[o].TerminalName;

            data.Type = res.TerminalData[o].Type;

            data.state = 5;

            data3.GroupSon.push(data);

          }

          if (data3.length > 0) {

            this.data2.push(data3);

          }

        } else {

          this.$message(res.Msg);

        }

      });

    },

    // 左边菜单栏点击事件

    click(a, b, c) {

      // console.log(a, b, c);

      //     Lat: "37.8623608478594"

      // Lng: "113.587616662875"

      if (a.Lat && a.Lng) {

        this.ditu(a.Lat, a.Lng, a.GroupName);

      }

      this.ev = false;

    },

},