先看我做的效果
可能每个人想要的效果不一样,我的只能做一个参考,一级数据是定死的,二级和三级数据是通过选中上级数据,请求回来的,
先看代码
<el-cascader
ref="cascader" // 全部选中是返回数据时需要
size="mini" // 可有可无
style="width: 220px" // 可有可无
@change="change" // 上传事件
:props="props" // 必要,配置属性
:options="options" //必要 可选项数据源,键名可通过Props属性配置
clearable // 是否可以清空
>
</el-cascader>
<script>
export default {
data(){
return {
options: [],
props: {
// multiple: true, // 开启只显示最后选择的值,按照需求来
emitPath: false, // 设置 false,则只返回该节点的值
lazy: true,
async lazyLoad(node, resolve) {
const { level } = node;
let stop_level = 3; //设置需要几级数据,
// list 初始数据,我的是写死的,你们可以根据你们的实际情况去修改,
let list = [
{
label: "车辆类型",
value: 1,
},
{
label: "物资类型",
value: 2,
},
{
label: "专家类型",
value: 3,
},
];
console.log(list);
// 超过最大层级,停止向下加载
let callback = () => {
resolve(
(list || []).map((ele) => {
return Object.assign(ele, {
leaf: level >= stop_level,
});
})
);
};
if (level == 1) {
const { value } = node;
console.log("选中的值",value); // value选中的值
let nodes = await getDropDownData({ resourType: value }); //需要发起的请求接口
let _nodes = nodes.data.records.map((item) => ({
value: item.id,
label: item.name,
}));
console.log(_nodes);
resolve(_nodes);
} else if (level == 2) {
const { value } = node;
console.log("选中的值",value); // value选中的值
let nodes = await getskuList(value); // 需要发起的请求接口
let _nodes = nodes.rows.map((item) => ({
value: item.id,
label: item.name,
leaf: true, //控制是不是最后一级了
}));
resolve(_nodes);
}
//要是你还需要三级,四级,五级数据,可以直接往后面这样加就可以了
//else if (level == 3) {
// const { value } = node;
// console.log("选中的值",value); // value选中的值
//let nodes = await getskuList(value); // 需要发起的请求接口
// let _nodes = nodes.rows.map((item) => ({
// value: item.id,
// label: item.name,
// leaf: true,
// }));
// resolve(_nodes);
// }
else {
callback();
}
},
},
}
}
methods:{
change(e) {
// console.log(this.options);
let nodeObj = this.$refs["cascader"].getCheckedNodes();
console.log("节点的值", e);
console.log("节点全部数据", nodeObj);
},
}
}
</script>