【el-tree】懒加载+整体刷新+搜索定位+初始展开+初始高亮显示+通过 keys 设置节点子元素+添加子节点下拉框
目录
懒加载
整体刷新
搜索定位
初始展开
初始高亮显示
处理子节点禁止选中状态
懒加载复选框回显的坑
通过 keys 设置节点子元素
懒加载数据处理-附带说明！
接口一次性返回多级数据+关键字搜索+默认高亮显示+点击节点传值
接口返回多个数组，数组中对象根据父id数据进行插入+关键字搜索+默认高亮显示+点击节点传值
添加子节点下拉框+关键字搜索+默认高亮显示+点击节点传值
懒加载
懒加载 lazy
整体刷新
整体刷新 :key="cascaderKey";;data添加cascaderKey: 1;; js需要更新的地方使用++this.cascaderKey;
搜索定位
搜索定位
data() {
return {
filterText: '',
}
},watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
},//优化之后的代码 不管有几级都可以适用
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) {
let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1;
// isPass ? _array.push(isPass) : '';
if(isPass){
_array.push(isPass)
}
this.index++;
if (!isPass && node.level != 1 && node.parent) {
this.getReturnNode(node.parent, _array, value);
}
},注意js中的name;;根据接口返回的名称参数名来定义;;注释掉的代码格式不对，不可打开
初始展开
初始展开 default-expand-all
注意 default-expand-all在懒加载时同样适用！
初始高亮显示
初始高亮显示 :highlight-current="true" :current-node-key="nowKey" ;; data中nowKey赋值存储的值
nowKey: this.type == 'S' ? parseInt(localStorage.getItem("outletIdSmoke")) : parseInt(localStorage.getItem(
"outletId")),点击绑定高亮显示
//树-转换
handleNodeClick(value, node) {
//value.id即为树当前的id
//存储！！
localStorage.setItem("outletIdSmoke", value.id);
},点击转换之后将点击过的值进行存储，在下一次打开页面的时候会高亮显示存储后的值
处理子节点禁止选中状态
节点数据处理时添加disable
datas.forEach(value => {
value.leaf = false
value.disabled = true
})
resolve(datas);懒加载复选框回显的坑
tree的连续勾选前两个节点，父节点被选中的问题。
出现的原因： 由于el-tree子节点尚未完全加载（只加载出来前几个），默认勾选已经开始（已加载出来的子节点被默认勾选），这时el-tree会认为子节点全部勾选，所以父节点也被勾选，这就导致所有子节点都被勾选。
解决方案1： setTimeout ，同步代码执行完毕，子节点完全加载后，去处理级数据。
解决方案2： 令父子不关联。
通过 keys 设置节点子元素
updateKeyChildren：通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性；(key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组
使用：
this.$refs.tree.updateKeyChildren(key, newList[key])懒加载数据处理-附带说明！
template：
:key="cascaderKey" 刷新用的key值
node-key="id" ref="tree" 必不可少
:highlight-current="true" 高亮
:props="props" 参数名称处理
:load="loadNode" lazy 懒加载数据
:render-content="renderContentPollution" 数据处理
@node-click="handleNodeClick" 点击事件
default-expand-all 全部展开；懒加载也可以实现全部展开
:filter-node-method="filterNode" 关键字搜索
:current-node-key="nowKey" 高亮显示的key值
script：
data() {
return {
filterText: '',
props: {
label: "name",
children: [],
isLeaf: "leaf"
},
cascaderKey: 1,
nowKey: this.type == 'S' ? parseInt(localStorage.getItem("outletIdSmoke")) : parseInt(localStorage.getItem(
"outletId")),
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
}, //刷新数据
getTreeUpdata() {
this.filterText = '';
++this.cascaderKey;
},
//优化之后的代码 不管有几级都可以适用
filterNode(value, data, node) {
if (!value) {
return true;//函数终止并返回true
}
let _array = []; //这里使用数组存储 只是为了存储值。
this.getReturnNode(node, _array, value);
let result = false;
_array.forEach((item) => {
result = result || item;
});
return result;
},
getReturnNode(node, _array, value) {
//看node.data.name是不是包含value字符;不包含则返回-1，包含则返回这个字符出现的位置
let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1;
if (isPass) {
_array.push(isPass)
}
this.index++;
if (!isPass && node.level != 1 && node.parent) {
this.getReturnNode(node.parent, _array, value);
}
},
// 异步树叶子节点懒加载逻辑
loadNode(node, resolve) {
// 一级节点处理
if (node.level == 0) {
this.requestTree(resolve);
}
// 其余节点处理
if (node.level >= 1) {
this.getIndex(node, resolve);
}
},
// 异步加载叶子节点数据函数
getIndex(node, resolve) {
//加载二级节点数据
if (node.data.children == '0') {
let params1 = {
id: node.data.id,
}
//接口
orgGetAreaByUser(params1).then(res => {
if (res.data.code == 0) {
var datas1 = res.data.data.list;
datas1.forEach(value => {
value.leaf = false
})
resolve(datas1);
} else if (res.data.code !== 0) {
this.$message.error(res.data.msg);
}
})
}
//加载三级节点数据
else if (node.data.children == '1') {
let params2 = {
id: node.data.id,
}
//接口
orgGetAreaAndSource(params2).then(res => {
if (res.data.code == 0) {
var datas2 = res.data.data.list;
datas2.forEach(value => {
value.leaf = false
})
resolve(datas2);
} else if (res.data.code !== 0) {
this.$message.error(res.data.msg);
}
})
}
//加载四级节点数据
else if (node.data.organizationCode != undefined) {
let params3 = {
id: node.data.id,
type: this.type, //S：废气，W：废水
}
//接口
pollutionOutletGetBySourceId(params3).then(res => {
if (res.data.code == 0) {
var datas3 = res.data.data.list;
datas3.forEach(value => {
value.leaf = true
})
resolve(datas3);
} else if (res.data.code !== 0) {
this.$message.error(res.data.msg);
}
})
}
},
// 首次加载一级节点数据函数
requestTree(resolve) {
let params = {
id: 1,
}
//接口
orgGetAreaByUser(params).then(res => {
if (res.data.code == 0) {
var datas = res.data.data.list;
datas.forEach(value => {
value.leaf = false
})
resolve(datas);
} else if (res.data.code !== 0) {
this.$message.error(res.data.msg);
}
})
},
//树-点击-转换
handleNodeClick(value, node) {
//判断是否为最后一级
if (value.pollutionEnterpriseId != undefined) {
//赋值
this.$emit('update:outletId', value.id);
this.$emit('getAllList');
//为下一次树的初始值准备！！！！！！！！！！！智能化
if (this.type == 'S') {
localStorage.setItem("outletIdSmoke", value.id);
} else {
localStorage.setItem("outletId", value.id);
}
}
},
//对每一级的数据进行处理-文字展示-仅做参考
renderContentPollution(h, {
node,
data,
store
}) {
if (data.children != undefined){
return ( < span > < i class = 'el-icon-location'
style = "color: #FFB427;" >
{data.name} );
}else if (data.organizationCode != undefined){
return ( < span > < i class = 'el-icon-office-building'
style = "color: #409eff;" />{data.name} );
}else{
if(data.status=='1'){
return ( < div > < el-tag type = "success"
size = "small"
class = 'work-pollution-tree' > 在线 {
data.name
} 接口一次性返回多级数据+关键字搜索+默认高亮显示+点击节点传值
template
:data="treeDatas" 总返回数据
:empty-text="emptyText" 对初始文字处理及暂无数据的处理，皆为此参数
:default-expand-all="true" 全部展开
script
data() {
return {
filterText: '',
treeDatas: [],
loadingTree: false, //loading
emptyText: '',
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
},mounted() {
this.getTree();
},
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) {
let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1;
// isPass ? _array.push(isPass) : '';
if (isPass) {
_array.push(isPass)
}
this.index++;
if (!isPass && node.level != 1 && node.parent) {
this.getReturnNode(node.parent, _array, value);
}
},
//获取数据
getTree() {
this.loadingTree = true;
this.treeDatas = [];
//接口
getSiteTree().then(response => {
this.loadingTree = false;
if (response.data.code == 0) {
this.treeDatas.push(response.data.data);
this.treeDatas = JSON.parse(JSON.stringify(this.treeDatas).replace(/childNode/g, 'children'))
//回显默认高亮
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(localStorage.getItem("stationId"));
});
} else if (response.data.code !== 0) {
this.emptyText = '暂无数据'
this.$message.error(response.data.msg);
}
})
.catch(err => {
this.emptyText = '暂无数据'
this.loadingTree = false;
if (err.response) {
this.$message.error('系统错误');
} else {
this.$message.error('网络错误');
}
});
},
//树-转换
handleNodeClick(value) {
//最后一级才处理
if (value.type == '3') {
this.$emit('update:outletId', value.id);
this.$emit('getAllList')
}
},接口返回多个数组，数组中对象根据父id数据进行插入+关键字搜索+默认高亮显示+点击节点传值
treeData: [],
props: {
label: "name",
},mounted() {
this.getList1();
},
getList1() {
this.treeData = [{
id: 1,
label: '一级 1水',
level: 1,
type:'W',
children: [{
id: 4,
label: '二级 1-1',
level: 2,
children: [{
id: 9,
label: '三级 1-1-1',
}, {
id: 10,
label: '三级 1-1-2',
}]
}]
}, {
id: 2,
label: '一级 2气',
level: 1,
type:'S',
children: [{
id: 5,
level: 2,
label: '二级 2-1',
children: [{
id: 11,
label: '三级 1-1-1',
}, {
id: 12,
label: '三级 1-1-2',
}]
}, {
id: 6,
level: 2,
label: '二级 2-2',
children: [{
id: 13,
label: '三级 1-1-1',
}, {
id: 14,
label: '三级 1-1-2',
}]
}]
}]
this.$nextTick(() => {
this.getList2()
})
} else if (res.data.code !== 0) {
this.$message.error(res.data.msg);
}
})
},
getList2() {
let params = [
{
pid: '11', id: '11-1', name: '德润公司2',
},
{
pid: '11', id: '11-2', name: '德润公司1',
},
{
pid: '12', id: '12-1', name: '德润公司3',
}
]
let newList = this.setData(params);
this.$nextTick(() => {
for (let key in newList) {
this.$refs.tree.updateKeyChildren(key, newList[key])
}
this.getList3();
})
} else if (res.data.code !== 0) {
this.loadingTree = false;
this.$message.error(res.data.msg);
}
})
},
getList3() {
let list = [
{
pid: '11-1', id: '11-1-1', name: '5级 1',
},
{
pid: '12-1', id: '12-1-1', name: '5级 2',
}
]
let newList = this.setData(list);
this.$nextTick(() => {
for (let key in newList) {
this.$refs.tree.updateKeyChildren(key, newList[key])
}
})
} else if (res.data.code !== 0) {
this.$message.error(res.data.msg);
}
})
},
setData(list) {
let overData={};
list.forEach((item,index)=>{
if (!overData[item.pid]) {
overData[item.pid]=[]
}
overData[item.pid].push({
id: item.id,
name: item.name,
type:item.type,
})
})
return overData
},如需单独给某一级加禁止选择，则
this.treeData.forEach((item) => {
item.disabled = true;
item.children.forEach((item2) => {
item2.disabled = true;
item2.children.forEach((item3) => {
item3.disabled = true;
})
})
})添加子节点下拉框+关键字搜索+默认高亮显示+点击节点传值
{{ data.name }}
添加小区
删除小区
添加设备
删除设备
// handleCommand加载之前处理，为了多传参数
beforeHandleCommand(id,command){
return {
'id': id,
'command':command
}
},
// 下拉框
handleCommand(command){
switch (command.command) {
case "addHousing"://添加小区
console.log('addHousing')
break;
case "deleteHousing"://删除小区
console.log('deleteHousing')
break;
case "addEquipment"://添加设备
console.log('addEquipment')
break;
case "deleteEquipment"://删除设备
console.log('deleteEquipment')
break;
}
},
请勿转载！望大神指正！搜索数据逻辑可以更优化一点！