需要设置options与v-model绑定的值,原著懒加载回显方法有问题
1.回显数据的时候除了给v-model
绑定的属性赋值以外,还要提供一个包含需要渲染的级联数据的options模板。
2.resolve(nodes) 返回的nodes为下一级要渲染的list列表数据,如果是回显已提供了options渲染模板但是不完整,则需要在后面懒加载的时候将返回的list数据和已存在的节点数据做对比,仅保留options中不存在的节点数据再把过滤后的节点resolve(nodes)。
链接:https://www.jianshu.com/p/1ff92ded424b
<el-cascader
v-model="cascaderValue"
:options="searchForm[0].datas"
:props="searchForm[0].props"
></el-cascader>
searchForm: [
{
type: 'Cascader',
label: '组织机构',
prop: 'cascaderValue',
showType: 'show',
// 级联选择器的配置项
datas: [
],
props: {
multiple: true,checkStrictly: true , expandTrigger: 'click',
lazy: true,
lazyLoad (node, resolve) {
// 节点的等级,根节点为0
debugger;
const {level} = node;
if (level === 0) {
that.loading = true;
that.R.forOperationPool.postJson('/mktPoolCampaign/qryOrgChildren',
that.params).then(res => {
if(res.ok){
let userJobList =
res.resultObject.userJobList;
let nodes = [];
if(userJobList !== null && userJobList.length > 0) {
for (let i = 0; i < userJobList.length; i++) {
nodes[i] = {
value: userJobList[i].bss_org_id,
label: userJobList[i].bss_org_name,
children:[]
};
}
}
that.searchForm[0].datas=nodes;
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
debugger;
resolve(nodes);
}
that.loading = false;
});
} else {
that.loading = true;
that.params.bssOrgId = node.value;
that.R.forOperationPool.postJson('/mktPoolCampaign/qryOrgChildren', that.params).then(res => {
if(res.ok){
let orgs = res.resultObject.orgChildren;
let list =[];
var nodes = [];
if(orgs !== null && orgs.length > 0) {
for (let i = 0; i < orgs.length; i++) {
nodes[i] = {
value: orgs[i].bssOrgId,
label: orgs[i].bssOrgName,
children:[]
};
}
}
debugger;
if(node.hasChildren && node.children.length){
nodes.forEach(item => {
let flag = true
node.children.forEach(subItem => {
if(item.value === subItem.value) {
flag = false
}
})
if(flag) {
// node.children.push(item);
list.push(item)
}
})
}
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(list);
}
that.loading = false;
});
}
}
},
},
{type: 'Radio', label: '关联活动:', prop: 'relevanceActivities', showType: 'show',datas: []},
{type: 'QueryBuilder', label: '更多条件:', prop: 'builderData', showType: 'show',datas: []},
],