需求:
先选类型 再级联选择内容
改变类型 会改变级联选择的可选内容
有 食品 家居用品 衣服 三个类型
选择不同的类型后 级联选择内容选某一公司 然后懒加载出来该公司 不同的商品 选中某个商品结束
关键点在于 更改不同类型后 级联选择的可选公司会变动 并且选中公司后 懒加载商品也会更新
此处我们只做二层级联选择
Element-ui的级联选择器
<el-cascader :props="props"></el-cascader>
<script>
let id = 0;
export default {
data() {
return {
props: {
lazy: true,
lazyLoad (node, resolve) {
const { level } = node;
setTimeout(() => {
const nodes = Array.from({ length: level + 1 })
.map(item => ({
value: ++id,
label: `选项${id}`,
leaf: level >= 2
}));
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
}, 1000);
}
}
};
}
};
</script>
在此基础上 增加了 不同类型会替换级联选择的内容 所以会有一定的更改
关键点在于 灵活运用了 resove 回调
<el-select v-model="type"
placeholder="请选择类别"
@change="changeType">
<el-option v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- :key="isResouceShow" 必须加入key 用来切换类别的时候 清除上次级联选择内容的缓存-->
<el-cascader :key="isResouceShow"
v-model="company"
placeholder="请选择内容"
:props="sourceProps" >
</el-cascader>
<script>
export default {
data(){
return {
type:'',
typeOption:[{label:'A',value:'A'},{label:'B',value:'B'}],
company:'',
companyOptions:[],
goodsList:[],
//处理级联选择
resolve: null,
//为了级联选择项可以清空缓存 非常重要
isResouceShow: 0,
}
},
computed: {
sourceProps() {
let _this = this;
return {
lazy: true,
lazyLoad(node, resolve) {
// 赋值给vue的resove 在后续函数中可以调用
_this.resolve = resolve;
const { level } = node;
let nodes = [];
if (level === 0) {
if (_this.companyOptions.length === 0) {
resolve(nodes);
}
//当level=0的时候 加载的是公司的内容
nodes = _this.companyOptions.map((e) => {
return {
value: e.value,
label: e.label,
leaf: level >= 1
};
});
resolve(nodes);
} else {
//level不等于0 的时候 加载的是公司下面的商品
_this.getProps(node);
}
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
}
};
},
},
methods:{
/**
* 补全级联选项数据
* 选择某公司后 去加载该公司下面的商品
* @param node
* @returns {Promise<Array>}
*/
async getProps(node) {
let { value } = node.data;
this.goodsList= await this.initGoodsOptions(this.company, value);
if (this.goodsList.length === 0) {
this.resolve([]);
}
const { level } = node;
//二级目录商品请求数据后补充在下拉选择中
const nodes = this.goodsList.map((e) => {
return {
value: e.value,
label: e.label,
leaf: level >= 1
};
});
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
this.resolve(nodes);
},
/**
* 更改类别后 重新获取级联选择内容
**/
async changeType() {
//清楚级联选择器缓存
this.cleanCache();
//重新获取数据
this.companyOptions = await this.initCompanyOptions(this.type);
//重新设置数据 调用sourceProps 的.lazyLoad属性
this.sourceProps.lazyLoad({ level: 0 }, this.resolve);
},
/**
* 清除级联选择器缓存
* 必要!! 否则切换类型 的时候 option内容会被累加起来
**/
cleanCache() {
++this.isResouceShow;
},
},
};
</script>