我是靠谱客的博主 魁梧白昼,最近开发中收集的这篇文章主要介绍element tree不刷新视图_关于element-ui的tree组件使用与修改,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

v2-c95117ff73dd0d4ff13ce1337f96cf07_1440w.jpg?source=172ae18b

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

v2-35948ab04047278f1817e33240f72c4f_b.jpg

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

defaultProps: {

children: 'children',

label: 'label' }

+ filterText(val) {

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

}

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

功能图如下:

v2-1c274a14b6229d418622167a4ff108ad_b.jpg

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

v2-462c2ab3cd40d966cff061f32fa31625_b.jpg

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

v2-3344392b344ee9d8a1bc2c93ca896fcf_b.jpg

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

v2-15dfaea9c61ea0bb505843b30511092d_b.jpg

v2-056512241555f60e4ff25ee4ddc283b5_b.jpg

递归函数,原来同上

v2-55be5e0dc07e867ea5a92ec05c1441af_b.jpg

v2-320360441cee418fd7d59c66987aee59_b.jpg

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

v2-efa721457a9ada40878b7c5151f4cc8e_b.jpg

v2-48c2bdb84df8d7032547ea4f63183c46_b.jpg

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

v2-47d2cad9cacb3022b165e089db5624c3_b.jpg

v2-e41946fc58817fee91884a58fff9e400_b.jpg

v2-bd8eef1736a91c0cc238bfb2daf72370_b.jpg

代码如下,希望能帮到你:

<template>

<div class="left">

<div class="trees">

<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 class="custom-tree-node" slot-scope="{ node,data}">

<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

/>

<img v-if="data.Type === 3" src="../../assets/icon/New/ship.png" alt />

{{node.label}}

</span>

</span>

</el-tree>

</div>

<!--自定义右键菜单html代码-->

<div v-show="ev" id="menu">

<div class="menu" @click="defence(1)">布防</div>

<div class="menu" @click="defence(2)">撤防</div>

<div class="menu" @click="defence(3)">留守</div>

<div class="menu" @click="leftgroup()">刷新</div>

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

<div class="menu" @click="change2()">全部收缩</div>-->

</div>

<div class="police">

<!-- <p>

<img src="../../assets/icon/New/报警_静态.png" alt />

</p>-->

<p

class="whole"

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

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

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

<div>

<p

@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>

<p

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

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

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

</div>

<p style="text-align: center;">系统时间:{{time}}</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[

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;

},

},

最后

以上就是魁梧白昼为你收集整理的element tree不刷新视图_关于element-ui的tree组件使用与修改的全部内容,希望文章能够帮你解决element tree不刷新视图_关于element-ui的tree组件使用与修改所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(32)

评论列表共有 0 条评论

立即
投稿
返回
顶部