重点添加:
lazy :load="loadNode"
template内 代码
<el-tree lazy :load="loadNode" :props="taskAreaListProps" :data="taskAreaListTreeData" node-key="id" :expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
//当为二级菜单的时候才展示 (即当此node.data内没有children字段时候才展示)
<span v-show="!data.children">
<el-button type="text" size="mini" @click="() =>equipmentPosition">
定位
</el-button>
<el-button type="text" size="mini" @click="() =>selectDeviceOne(data,'2')">
选中
</el-button>
<!-- <el-button type="text" size="mini" @click="() =>equipmentAttribute(node, data)">
属性
</el-button> -->
<el-button type="text" size="mini" @click="() =>equipmentDetail(node, data)">
详情
</el-button>
<el-button class="f-red" type="text" size="mini" @click="() =>equipmentDel(node, data)">
删除
</el-button>
</span>
</span>
</el-tree>
methods代码
async loadNode(node, resolve) {
if (node.level === 0) {
return resolve(await this.toGetTaskAreaList(""));
} else if (node.level === 1) {
return resolve(await this.toFindGuideList(node.data.id));
} else {
return resolve([]) // 防止该节点没有子节点时一直转圈的问题出现
}
},
// 通过id获取引导线 二级
async toFindGuideList(id) {
let data = {
guideName: "", //引导线名称
taskRegionId: id, //区域任务id
pageNum: 0, //页数
pageSize: 0 //页码
}
let res = await findGuideList(data)
return res.rows?res.rows:[]
},
// 获取所有作业区域 一级
async toGetTaskAreaList(name, type) {
let data = {
projectId: Number(Cookies.get("projectId")), //项目id
taskName: name, //区域名称
pageNum: 0, //页数
pageSize: 0 //页码
}
let res = await getTaskAreaList(data)
if (res.rows.length) {
res.rows.forEach(item => {
item.guideName = item.taskName
item.children = []
})
if (type) {
this.taskAreaListTreeData = res.rows
}
}
return res.rows
},
//搜索时候 即为刷新树 将树的data重新赋值即可 其他的操作loadNode函数会自动进行
inputChangeTaskArea() {
this.toGetTaskAreaList(this.taskAreaName, true)
},
版权声明:本文为josiecici原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。