ElementUI的el-tree实现懒加载查询和直接全部查询出来
Posted 指导毕业设计Monkey
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ElementUI的el-tree实现懒加载查询和直接全部查询出来相关的知识，希望对你有一定的参考价值。
文章目录
懒加载实现（点击一级才出现二级的数据）
前端vue实现
1. vue的template里面的代码
<el-dialog
v-dialogDrag
title="医院代码索引"
:visible.sync="hscodeDialogFormVisible"
class="dialog"
width="40%"
>
<div class="device-tree">
<el-scrollbar style="height:100%">
<el-input
placeholder="输入关键字进行模糊查询"
v-model="filterText">
</el-input>
<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" lazy :load="loadNode"
:filter-node-method="filterNode" ref="tree"></el-tree>
</el-scrollbar>
</div>
<div slot="footer" class="dialog-footer">
<el-button plain @click="hscodeDialogFormVisible = false" size="small">清空选择</el-button >
<!-- <el-button type="danger" @click="sortSavebtn">确 定</el-button> -->
</div>
</el-dialog>
2vue文件里面的data数据
data()
return
isadd:false,
// 列表数据
dataList: [],
// 公共数据
commonData:
finished: "未完成",
chgtyp: "",
recdte: "",
newcompany: "",
rscdno: "",
calname: "",
ccbhsadd: "",
hscode: "",
tsalesunt: "",
hsname: "",
hsadd: "",
hsnname: "",
hsnadd: "",
chgvdte: "",
trectyp: "",
sumind: "",
hqind: "",
hclass: "",
hscodtyp: "",
,
adddteValue: "", //新增日期
conditions: maintainCondition.conditions, //搜索条件
// fence: maintainCondition.injuryCodeUpholds,//栏位
form:
//高级搜索
tableData: [],
//排序
sortTableData: [],
,
// checkList: ["排序字段1"],
// 高级搜索滑动框值
fields: [
label: "变更类型",
value: "lchi.chgtyp",
,
label: "记录日期",
value: "lchi.recdte",
,
label: "医院代码",
value: "lchi.hscode",
,
label: "医院名称",
value: "lchi.hsname",
,
label: "医院地址",
value: "lchi.hsadd",
,
label: "医院新名称",
value: "lchi.hsnname",
,
label: "变更生效日",
value: "lchi.chgvdte",
,
label: "状态",
value: "lchi.finished",
,
],
// 排序滑动框值
fields2: [
label: "序号",
value: "lchi.id",
,
label: "变更类型",
value: "lchi.chgtyp",
,
label: "记录日期",
value: "lchi.recdte",
,
label: "医院代码",
value: "lchi.hscode",
,
label: "医院名称",
value: "lchi.hsname",
,
label: "医院地址",
value: "lchi.hsadd",
,
label: "医院新名称",
value: "lchi.hsnname",
,
label: "医院新地址",
value: "lchi.hsnadd",
,
label: "变更生效日",
value: "lchi.chgvdte",
,
label: "医院类别",
value: "lchi.trectyp",
,
label: "赔付范围",
value: "lchi.sumind",
,
label: "医院品质",
value: "lchi.hqind",
,
label: "医院级别",
value: "lchi.hclass",
,
label: "代码类型",
value: "lchi.hscodtyp",
,
],
dialogFormVisible: false,
sortDialogFormVisible: false,
hscodeDialogFormVisible: false,//医院代码索引弹框
page:
pageIndex: 1,
pageSize: 10,
totalPage: 0,
,
nums:"",
flage:"",
flageApi:true,
newcompanyOptions:[],//公司别
treeData: [],
hscode:"",
hscodeindex:"",
defaultProps:
children: 'children',
label: 'label'
,
filterText: '',
;
,
3vue文件里面的methods方法
handleNodeClick(data)
console.log(data.treelevel);
console.log(data,"data----------");
if(data.treelevel == 1)
this.hospitalCodeIndexFn(data.hscode,data.sort)
if(data.treelevel == 2)
this.hscodeDialogFormVisible = true
this.hospitalCodeIndexFn2(data.hscode,data.sort)
if(data.treelevel == 3)
// let newdata =
// hscode:data.hscode
//
// this.hscode = data.hscode
this.dataList[this.hscodeindex].hscode = data.hscode
this.dataList[this.hscodeindex].hsname = data.hsname
this.dataList[this.hscodeindex].hsadd = data.hsadd
this.dataList[this.hscodeindex].trectyp = data.trectyp
this.dataList[this.hscodeindex].sumind = data.sumind
this.dataList[this.hscodeindex].hqind = data.hqind
this.dataList[this.hscodeindex].hclass = data.hclass
this.dataList[this.hscodeindex].hscodtyp = data.hscodtyp
this.dataList[this.hscodeindex].chgtyp = data.chgtyp//变更类型
// this.dataList[this.hscodeindex].hscode = data.hscode
this.hscodeDialogFormVisible = false
,
// 医院代码索引/获取市
hscodeClick(num,index)
this.hscodeindex = index
this.treeData = []
this.hscodeDialogFormVisible = true
this.$store.dispatch("loading/CHANGE_LOADING", true);
let params =
pid:"source"
;
hospitalCodeIndexApi(params)
.then((res) =>
this.$store.dispatch("loading/CHANGE_LOADING", false);
if (res.resultCode === 0)
let newData = res.data
newData.forEach((e,eindex)=>
this.treeData.push(label:e.hscode + e.hsname,hscode:e.hscode,treelevel:1,sort:eindex,children:[])
)
)
.catch(() => this.$store.dispatch("loading/CHANGE_LOADING", false));
,
// 获取县
hospitalCodeIndexFn(hscode,id)
let params =
pid:hscode
hospitalCodeIndexApi(params)
.then((res) =>
this.$store.dispatch("loading/CHANGE_LOADING", false);
if (res.resultCode === 0)
// console.log(res.data);
let newData = res.data
newData.forEach((e,eindex)=>
this.$set(e,"label",e.hscode + e.hsname)
this.$set(e,"treelevel",2)
this.$set(e,"sort",eindex)
this.$set(e,"children",[])
)
this.treeData.forEach((i,iindex)=>
if(i.sort == id)
i.children = newData
)
)
.catch(() => this.$store.dispatch("loading/CHANGE_LOADING", false)
);
,
// // 获取医院
hospitalCodeIndexFn2(hscode,id)
let params =
pid:hscode
hospitalCodeIndexApi(params)
.then((res) =>
this.$store.dispatch("loading/CHANGE_LOADING", false);
if (res.resultCode === 0)
// console.log(res.data);
let newData = res.data
newData.forEach((e,eindex)=>
this.$set(e,"label",e.hscode + e.hsname)
this.$set(e,"treelevel",3)
this.$set(e,"sort",eindex)
this.$set(e,"children",[])
)
this.treeData.forEach((i,iindex)=>
if(newData[0].hscode.indexOf(i.hscode) != -1)
i.children.forEach((j,jindex)=>
if(j.sort == id)
console.log(j.hscode);
j.children= newData
)
)
)
.catch(() => this.$store.dispatch("loading/CHANGE_LOADING", false)
);
,
4vue文件里面的监听方法
watch:
filterText(val)
this.$refs.tree.filter(val);
,
注意因为是懒加载所以需要每次加载完成都需要使弹窗置为true
后端实现
封装的工具类：
package com.citicpru.clmwork.utils;
import lombok.Data;
import lombok.Getter;
/*
* author: monkey
* 用于接收post请求的单个参数
* */
@Data
@Getter
public class IdBean
private String pid;
1. controller层
@PostMapping(value = "/hospitalCodeIndex")
@ApiOperation(value = "医院代码索引", response = ObjectRestResponse.class)
public ObjectRestResponse hospitalCodeIndex(@ApiParam(value = "医院代码索引")
@RequestBody IdBean idBean)
String pid = idBean.getPid();
if(pid == null || "".equals(pid))
pid = "source";
ObjectRestResponse restResponse = new ObjectRestResponse();
String length = "";
int end = 0;
if ("source".equals(pid))
end = 0;
length = "2";
以上是关于ElementUI的el-tree实现懒加载查询和直接全部查询出来的主要内容，如果未能解决你的问题，请参考以下文章
解决el-tree lazy懒加载时，连续勾选前两个子节点后第二次进入默认选中时，将父节点也勾选的问题
elementUI el-table 懒加载实现修改删除刷新子节点信息