需求:
需要有联级下拉选择,可以任意选择 叶节点进行接口查询
实现效果:
==============>
代码:
// template 中
// 注意 props 中emitPath、checkStrictly
<el-col :span="8">
<el-form-item label="所属模块:" size="mini">
<el-cascader
ref="cascaderRef"
:key="moduleKey"
v-model="form.module"
:options="curModuleOptions"
:props="{ expandTrigger: 'hover', emitPath: false, checkStrictly: true }"
clearable
>
<template slot-scope="{ node, data }">
<div @click="cascaderClick(node, data)">
<span>{{ data.label }}</span>
</div>
</template>
</el-cascader>
</el-form-item>
</el-col>
// methods 中
// 联级下拉 任意触发
cascaderClick(node, data) {
// node.path为选中的数组、data.label 为选中的最后一个叶节点
this.$refs.cascaderRef.checkedValue = node.path;
this.$refs.cascaderRef.computePresentText(); // 选中 有数据 但是不展示在框中,调用这个方法进行展示
this.$refs.cascaderRef.toggleDropDownVisible(false);
},