avue tree 懒加载及联动(完整案例)
<template><basic-container><avue-crud:option="option":table-loading="loading":data="data":page.sync="page":permission="permissionList":before-open="beforeOpen"v-model="form"ref.
·
<template>
<basic-container>
<avue-crud
:option="option"
:table-loading="loading"
:data="data"
:page.sync="page"
:permission="permissionList"
:before-open="beforeOpen"
v-model="form"
ref="crud"
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad"
>
</avue-crud>
</basic-container>
</template>
<script>
// 数据接口
import {
getList,
getSchoolList,
getSchoolBm,
} from "@/api/basic/teacher";
export default {
data() {
return {
form: {},
query: {},
loading: true,
selectionList: [],
option: {
height: "auto",
calcHeight: 30,
tip: false,
column: [
{
label: "校区",
prop: "xiaoqu",
type: "tree",
// 接口对应字段
props: {
label: "deptName",
value: "id",
},
dicData: [],
lazy:true,
treeLoad(node,resolve){
console.log("节点",node)
let stop_level = 2;
let level = node.level;
let data = node.data || {}
let code = data.id;
var list = [];
let callback = () => {
resolve((list || []).map(ele => {
return Object.assign(ele, {
leaf: level >= stop_level
})
}));
}
if(level ==0 ){
getSchoolList().then(res => {
list = res.data.data
callback()
});
}
if(level == 1){
getSchoolList(code).then(res => {
list = res.data.data
callback()
});
}else if(level == 2){
getSchoolList(code).then(res => {
list = res.data.data
callback()
});
}else{
getSchoolList().then(res => {
list = res.data.data
callback()
});
}
},
change: ({ value }) => {
// 联动下一级
this.getSchoolBmFn(value);
// 调取父及数据接口,避免再次点击没有数据
this.getSchoolListFn()
},
rules: [
{
required: true,
message: "请输入校区",
trigger: "blur",
},
],
},
{
label: "部门",
prop: "bumen",
type: "tree",
// 接口对应字段
props: {
label: "title",
value: "id",
},
dicData: [],
rules: [
{
// required: true,
message: "请输入部门",
trigger: "blur",
},
],
},
],
},
data: [],
};
},
methods: {
// 部门
getSchoolBmFn(id) {
let _this = this;
if(id){
getSchoolBm(id).then((res) => {
if (res.data.code == 200) {
_this.option.column.forEach((item) => {
if (item.prop == "bumen") {
item.dicData = res.data.data;
}
});
}
});
}
},
onLoad(page, params = {}) {
this.loading = true;
getList(
page.currentPage,
page.pageSize,
Object.assign(params, this.query)
).then((res) => {
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
this.selectionClear();
});
},
// 校区数据
getSchoolListFn() {
let _this = this;
getSchoolList().then((res) => {
if (res.data.code == 200) {
_this.option.column.forEach((item) => {
if (item.prop == "xiaoqu") {
item.dicData = res.data.data;
}
});
}
});
},
},
};
</script>
<style>
</style>
更多推荐
已为社区贡献11条内容
所有评论(0)