el-cascader 异步加载子节点数据+模糊搜索
需求点el-cascader一共两级,第一级数据由接口返回;点击第一级的展开icon,拿第一级的id去请求接口获取第二级的数据;el-cascader需带有模糊搜索功能。<el-form-item label="业务状态" prop="businessStatus"><el-cascaderref="casader"clearablekey="casader":options="
·
需求点
- el-cascader一共两级,第一级数据由接口返回;点击第一级的展开icon,拿第一级的id去请求接口获取第二级的数据;
- el-cascader需带有模糊搜索功能。
<el-form-item label="业务状态" prop="businessStatus">
<el-cascader
ref="casader"
clearable
key="casader`"
:options="businessProList"
:props="optionProps"
filterable
:before-filter="beforeFilter"
@input.native="inputEnter"
@change="handleSelectBusiness"
placeholder="业务状态"
size="small"
></el-cascader>
</el-form-item>
<script>
export default {
data() {
return {
productList: [],
businessProList: [],
optionProps: {
lazy: true,
lazyLoad: this.lazyLoad
},
},
mounted() {
this.getAllProList();
},
methods: {
//获取第一级的数据
getAllProList() {
api.getAllPro({}, this.isSaas ? "saasOrder" : "").then((res) => {
this.productList = res.data;
res.data.forEach((item) => {
this.businessProList.push({
value: item.proId,
label: item.proName,
children: []
});
});
this.originBusinessList = this.businessProList.slice(0);
});
},
beforeFilter() {
return false;
},
//模糊搜索
inputEnter() {
let ref = this.$refs["casader"];
setTimeout(() => {
this.businessProList = [];
this.originBusinessList.forEach((item) => {
if (item.label.indexOf(ref.inputValue) !== -1) {
this.businessProList.push(item);
}
});
});
},
handleSelectBusiness(val) {
this.filters.businessStatus = val[1];
},
}
}
lazyLoad(node, resolve) {
if (node.value) {
let nodes = [];
let proId = node.value;
api.getData({id}).then((res) => {
res.data.forEach((item) => {
nodes.push({
value: item.processNodeId,
label: item.nodeName,
leaf: true
});
});
resolve(nodes);
});
} else {
resolve([]);
}
},
</script>
效果图:


DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)