el-cascader (递归)
- 把children为空数组置为undefined
<el-cascader
@change="cascaderchange"
v-model="value"
placeholder="试试搜索：指南"
:options="options"
:props="{
multiple: true, // 多选
expandTrigger: 'hover', // 次级菜单的展开方式
label: 'label', //
value: 'value', //
emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
}"
filterable
></el-cascader>
data() {
return {
value: [],
options: [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "设计原则",
children: [
{
value: "yizhi",
label: "一致",
children:[],
},
{
value: "kekong",
label: "可控",
children:[],
},
],
},
],
},
{
value: "zujian",
label: "组件",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout 布局",
children: [],
},
{
value: "color",
label: "Color 色彩",
children: [],
},
],
},
],
},
],
};
},
// el-cascader控件 最后一级出现空白 暂无数据
// 问题原因分析:由于数据是从后台传递过来的，当后端的哥们使用递归算出菜单，然后转换成json传递到前端的时候。就会出现 最底层 的子项中 的 children 为空数组，这样就会造成，空级联 的bug存在。
// 解决办法: 使用递归的方式，将最底层中的 children设为undefined
this.getTreeData(this.options)
getTreeData(data){
for(var i=0;i<data.length;i++){
if(data[i].children.length<1){
// children若为空数组，则将children设为undefined
data[i].children=undefined;
}else {
// children若不为空数组，则继续 递归调用 本方法
this.getTreeData(data[i].children);
}
}
return data;
},
- 取出label
cascaderchange(e){
console.log(e,this.value)
var names = []
this.diguiEvent(names,this.options,this.value)
console.log('names',names)
},
diguiEvent(names,data,users){
var l = data.length;
for (var i = 0; i < l; i++) {
for(var j= 0;j<users.length;j++){
if(data[i].value==users[j]){
names.push(data[i].label)
}
}
if(data[i].children && data[i].children.length > 0){
this.diguiEvent(names,data[i].children,users)
}
}
},
el-tree (递归)
- 根据ID或者ID集合查找树形结构数据里面ID所对应的节点信息
<div>
<el-tree
class="custom-tree"
highlight-current
show-checkbox
:data="location4gcar"
:props="defaultProps"
@check-change="handleCheckChange"
@check="handleCheck"
@node-click="nodeClick"
:setChecked="true"
ref="location4gcar"
node-key="id"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span style="display: flex; align-items: center">
{{ data.text || data.deviceName }}
<span v-if="data.count">
[{{ data.online }}/{{ data.count }}]
</span>
</span>
</span>
</el-tree>
</div>
data(){
return{
defaultProps: {
children: "children",
label: "name",
isLeaf: "leaf",
},
location4gcar:[],
tree: [
{
id: "1a420972-6a0c-45f2-997f-f7737065c6d2",
text: "志远科技",
type: "organization",
state: "open",
checked: false,
children: [
{
id: "1949870c-f24d-4eca-a8ba-8e2a796c18b1",
text: "技术部",
type: "organization",
state: "open",
checked: false,
children: [],
},
{
id: "b1efc421-7ae9-4d19-867b-0d9cecd927a3",
text: "测试部",
type: "organization",
state: "open",
checked: false,
children: [],
},
{
id: "bea50afb-07e2-4b36-8631-ade36cf749b1",
text: "研发部",
type: "organization",
state: "open",
checked: false,
children: [],
},
{
id: "5caf1e53-79dc-4dcb-981c-f04cad0ee7ac",
text: "维修部",
type: "organization",
state: "open",
checked: false,
children: [],
},
],
},
],
treeData: [
{
id: "1502305",
insertTime: "2020-11-03 16:10:02",
inserterName: "海康同步增加数据",
inserterId: "",
updateTime: "2020-12-08 02:23:15",
updaterName: "海康同步更新数据",
updaterId: "",
sortIndex: "",
displayText: "DeviceLocation{1502305}",
deviceNo: "E5157653801320018535",
deviceType: "device-location-4gcar",
deviceName: "浙H1226警车载",
deviceModel: "",
organizationId: "1a420972-6a0c-45f2-997f-f7737065c6d2",
organizationCode: "",
organizationName: "",
deviceClass: "",
deviceDescription: "",
deviceBrand: "海康",
factoryTime: "",
maintenance: null,
status: 1,
personNo: "",
personName: "",
lastPositionTime: "",
lon: "26",
lat: "26",
speed: "",
organization: "3.3082565002e+019",
channelid: "E51576538",
classType: "deviceLocation",
isDeleted: false,
},
{
id: "1452103",
insertTime: "2020-08-17 15:51:00",
inserterName: "海康同步增加数据",
inserterId: "",
updateTime: "2020-12-08 02:23:16",
updaterName: "海康同步更新数据",
updaterId: "",
sortIndex: "",
displayText: "DeviceLocation{1452103}",
deviceNo: "E5117845401320012051",
deviceType: "device-location-4gcar",
deviceName: "浙H1227警车载",
deviceModel: "",
organizationId: "5caf1e53-79dc-4dcb-981c-f04cad0ee7ac",
organizationCode: "",
organizationName: "",
deviceClass: "",
deviceDescription: "",
deviceBrand: "海康",
factoryTime: "",
maintenance: null,
status: 0,
personNo: "",
personName: "",
lastPositionTime: "",
lon: "27",
lat: "27",
speed: "",
organization: "3.3082565002e+019",
channelid: "E51178454",
classType: "deviceLocation",
isDeleted: false,
},
],
}
}
created() {
var self = this
var ccc = self.getCity(
JSON.parse(JSON.stringify(self.treeData)),
JSON.parse(JSON.stringify(self.tree))
); //
this.location4gcar = ccc;
},
aa(data, id, arr) {
data.count = 0;
data.online = 0;
for (var i in arr) {
if (arr[i].organizationId == id) {
data.children.push(arr[i]);
if (arr[i].status == "1") {
data.online++;
}
data.count++;
}
}
},
// data 是 树组织 ,arr拼接在树组织中
getCity(arr, data) {
for (var j = 0; j < data.length; j++) {
if (data[j].deviceName) {
continue;
}
this.aa(data[j], data[j].id, arr);
if (data[j].children !== undefined && data[j].children.length > 0) {
this.getCity(arr, data[j].children);
}
}
return data;
},
handleCheckChange(data, checked, int) {
// 该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
console.log("data,checked,int", data, checked, int);
this.treeCheck = checked;
if (data.zindex != 1) {
}
},
handleCheck(data) {
console.log("check", this.treeCheck);
console.log("data", data);
if (this.treeCheck) {
var arr = [];
this.returnDataPoint(arr, data);
console.log("arr1", arr);
} else {
var arr = [];
this.returnDataPoint(arr, data);
console.log("arr2", arr);
}
},
nodeClick(data, node, oneself) {
// 传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
console.log(data, node, oneself);
},
returnDataPoint(arr, data) {
if (!(data instanceof Array)) {
var keys = [];
for (var key in data) {
keys.push(key);
}
// if(keys.indexOf('children') > -1){
// this.returnDataPoint(arr,data['children'])
// }else if(keys.indexOf('lon') > -1){
// arr.push(this.returnPointObj(data))
// }
if (keys.indexOf("children") > -1 && data.children.length > 0) {
this.returnDataPoint(arr, data["children"]);
} else if (keys.indexOf("lon") > -1) {
arr.push(data);
}
} else if (data instanceof Array) {
var l = data.length;
for (var i = 0; i < l; i++) {
if (data[i].lon || data[i].children.length == 0) {
// if (data[i].children.length == 0) {
// arr.push(this.returnPointObj(data[i]))
arr.push(data[i]);
} else {
if (data[i].children.length > 0) {
this.returnDataPoint(arr, data[i].children);
}
}
}
}
},
递归调接口
接着el-tree 第二种方法
// 递归调接口
注明: data1类似于上面的tree数据, res.data.data类似于上面treedata数据
async locationEquipment(data1, deviceType) {
return new Promise(async (resolve) => {
for (var i = 0, l = data1.length; i < l; i++) {
if (data1[i].deviceName) {
continue;
}
await this.$api
.locationEquipment(
{ method: "post", type: "datagrid" },
{ organizationId: data1[i].id, deviceType }
)
.then((res) => {
if (!data1[i].children) {
data1[i].children = [];
}
if (res.data.data.length > 0) {
data1[i].children.push(...res.data.data);
}
if (data1[i].children.length > 0) {
//如果有子元素而且不是摄像头,进行递归
this.locationEquipment(data1[i].children, deviceType);
}
});
}
resolve(data1);
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
