级联选择器el-cascader根据下拉数据的id获取所对应的文字、获取label文字内容、只需要最后一级的数据
·
只需要最后一级的数据
在用cascader时只取最后一级数据传给后端 组件的属性emitPath: false就可以做到,取值就是最后一级传给后端。并且后端放回的id 也直接可以做回显
emitPath: false //重点

<el-cascader
v-model="Type"
:options="Options"
:props="{ value: 'value', label: 'label', children: 'children', emitPath: false }"
filterable
clearable
@change="pzChange"
/>
其他
问题:项目中需求就是根据选择对应的省市区把省市区的文字传递过去,并把中将的‘,’去掉,正常情况下都是要传id的,既然需求来了, 那就慢慢调试,话不多上代码。
效果图:
<template>
<div>
<div class="block">
<el-cascader v-model="value" :options="options" ref="tree"></el-cascader>
<button @click="getData">获取节点下的汉字</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: [],
options: [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "设计原则",
children: [
{
value: "yizhi",
label: "一致",
},
{
value: "fankui",
label: "反馈",
},
{
value: "xiaolv",
label: "效率",
},
{
value: "kekong",
label: "可控",
},
],
},
{
value: "daohang",
label: "导航",
children: [
{
value: "cexiangdaohang",
label: "侧向导航",
},
{
value: "dingbudaohang",
label: "顶部导航",
},
],
},
],
},
],
};
},
methods: {
getData() {
// 获取节点下的汉字
let arr = [];
let data = this.$refs.tree.getCheckedNodes()[0].pathLabels.toString();
arr = data.split(",");
console.log("🚀 ~ file: Index.vue:67 ~ getData ~ arr:", arr);
},
},
};
</script>
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)