<template>
<div>
<el-cascader v-model="cat_ids" v-if="showCascader" filterable :props="props" class="w-460px" @change="handleChange" />
<el-input v-if="!showCascader" class="w-460px"/>
</div>
</template>
<script>
import { PDD } from '@/apis';
export default {
props: ['detail'],
data() {
return {
cat_ids: [],
catOptions: [],
showCascader: false,
props: {
lazy: true,
lazyLoad: this.catLazyLoad
}
}
},
mounted() {
},
watch: {
detail(val) {
const params = {
cat_id: val.cat_id,
}
$api.接口名称(params).then(res => {
const data = res.list
this.cat_ids =[id1, id2, id3] // 数据回显时后端返回的选中项所有id集合
this.showCascader = true
})
}
},
methods: {
async catLazyLoad(node, resolve) {
const { level } = node;
const parent_cat_id = level ? node.value : level
let res = await $api.接口名称({ parent_cat_id })
const data = res.list
const nodes = data.length && data.map(item => ({
value: item.cat_id,
label: item.cat_name,
leaf: item.leaf
}));
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
},
handleChange() {
this.$emit('select', this.cat_ids)// [1, 2, 3]
},
},
}
</script>
<style scoped lang="less"></style>
el-cascader 懒加载数据与自动回显完整代码
最新推荐文章于 2024-07-10 14:05:50 发布