sgLazyCascader源码
<template>
<div :class="$options.name">
<el-cascader :props="props" v-model="model" :placeholder="placeholder || '请选择'" :options="options"></el-cascader>
</div>
</template>
<script>
export default {
name: 'sgLazyCascader',
data() {
return {
model: null,
mainKey: 'id',//默认主键
defaultRootId: 'root',//默认根节点ID就是root
form: {},
props: {
lazy: true,
expandTrigger: 'hover',
multiple: false,
lazyLoad: (node, resolve) => {
this.loadNodeData(node.level === 0 ? { [this.mainKey]: this.defaultRootId } : node.data, d => resolve(d));
}
}
}
},
props: [
"value",
"options",//回显的时候使用
"data",
"placeholder",
],
watch: {
value: { handler(d) { this.model = d; }, deep: true, immediate: true, },
model(d) { this.$emit('input', d); },
data: {
handler(d) {
d.nodeKey && (this.mainKey = d.nodeKey);//主键
d.rootId && (this.defaultRootId = d.rootId);//根节点ID
d.value && (this.props.value = d.value);//指定选项的值为选项对象的某个属性值
d.label && (this.props.label = d.label);//指定选项标签为选项对象的某个属性值
d.children && (this.props.children = d.children);//指定选项的子选项为选项对象的某个属性值
d.expandTrigger && (this.props.expandTrigger = d.expandTrigger);//次级菜单的展开方式click / hover
d.hasOwnProperty('multiple') && (this.props.multiple = d.multiple);//是否多选
d.hasOwnProperty('lazy') && (this.props.lazy = d.lazy);//是否动态加载子节点,需与 lazyLoad 方法结合使用
}, deep: true, immediate: true,
},
},
methods: {
// 加载节点数据(通过接口向后台获取数据)
loadNodeData(data, cb) {
let resolve = d => { cb && cb(d) };
this.$emit(`loadNode`, data, resolve);
},
},
};
</script>
用例
<template>
<div :class="$options.name">
<sgLazyCascader v-model="value" :data="{
nodeKey: `ID`,//主键
value: `ID`,
label: 'MC',
}" :options="options" placeholder="请选择" @loadNode="loadNode" />
</div>
</template>
<script>
import sgLazyCascader from "@/vue/components/admin/sgLazyCascader";
export default {
components: {
sgLazyCascader,
},
data() {
return {
value: [],
options: [],
}
},
methods: {
// 加载节点数据
loadNode(data, resolve) { this.$d.apiname({ data: { PID: data.ID }, doing: { s: d => resolve(d) } }); },
}
};
</script>