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

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

<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>

<el-tree

style="margin-top:14px;overflow: auto;height: 100%;"

class="filter-tree"

default-expand-all

node-key="GroupId"

:data="data2"

:props="defaultProps"

:filter-node-method="filterNode"

@node-contextmenu="show"

@node-click="click"

ref="tree"

<span>

<img

v-if="node.expanded && data.Type === 1"

src="../../assets/icon/New/file_01.png"

alt

<img

v-if="!node.expanded && data.Type === 1"

src="../../assets/icon/New/file_02.png"

alt

<img

v-if="data.Type === 2&&data.Status === 1"

src="../../assets/icon/New/shop_ls.png"

alt

<img

v-if="data.Type === 2&&data.Status === 2"

src="../../assets/icon/New/shop_cf.png"

alt

<img

v-if="data.Type === 2&&data.Status === 3"

src="../../assets/icon/New/shop_lx.png"

alt

<img

v-if="data.Type === 2&&data.Status === 4"

src="../../assets/icon/New/shop_bf.png"

alt

<img

v-if="data.Type === 2&&data.Status === 5"

src="../../assets/icon/New/shop_lx.png"

alt

</span>

</el-tree>

</div>

<!-- <div class="menu" @click="change1()">全部展开</div>

</div>

<!-- <p>

</p>-->

class="whole"

@click="index=0;list=[];sta(0)"

:class="[ index === 0?'color':'']"

>全部:{{bufang+lixian+chefang+liushou}}</p>

<div>

@click="index=6;list=[];sta(6)"

:class="[ index === 6?'color':'']"

>在线:{{bufang+chefang+liushou}}</p>

<p @click="index=3;list=[];sta(3,data2)" :class="[ index === 3?'color':'']">离线:{{lixian}}</p>

</div>

<div>

<p @click="index=1;list=[];sta(1,data2)" :class="[ index === 1?'color':'']">布防:{{bufang}}</p>

<p @click="index=2;list=[];sta(2,data2)" :class="[ index === 2?'color':'']">撤防:{{chefang}}</p>

</div>

<div>

<p @click="index=4;list=[];sta(4,data2)" :class="[ index === 4?'color':'']">留守:{{liushou}}</p>

@click="index=7;list=[];sta(7)"

:class="[ index === 7?'color':'']"

>未布防:{{chefang+lixian}}</p>

</div>

</div>

</template>

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[

].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[

].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;

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,457评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,837评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,696评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,183评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,057评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,105评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,520评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,211评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,482评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,574评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,353评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,213评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,576评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,897评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,174评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,489评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,683评论 2赞 335

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

推荐阅读更多精彩内容