1.?多選時?獲取?cascader 級聯(lián)選擇器的 label 值
? ? ? ? 需要給 el-cascader 加 ref 用以獲取值
// 級聯(lián)選擇器
<el-cascader
ref="refCascader" // 加 ref 用以獲取值
v-model="queryParams.chinaAreaDataSelectedOptions" // 直接獲取 value 值
:options="chinaAreaDataOptions" // 放地區(qū)信息
:props="{ expandTrigger: 'hover', multiple: true }"
@change="handleChange"
>
</el-cascader>
// 方法
handleChange() {
const textArr = [];
const arr = this.$refs["refCascader"].getCheckedNodes();
arr.forEach((i) => {
textArr.push(i.pathLabels);
});
console.log(textArr);
},?獲取后的樣式
2. 單選時獲取?cascader 級聯(lián)選擇器的值?
// element 級聯(lián)選擇器
<el-form-item label="門店地區(qū)">
<el-cascader
ref="refCascader"
v-model="queryParams.chinaAreaDataSelectedOptions"
size="medium"
:options="chinaAreaDataOptions"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"
>
</el-cascader>
</el-form-item>
// methods 方法
handleChange(a) {
const areaTextArr = [];
const arr = this.$refs["refCascader"].getCheckedNodes()[0].pathNodes;
arr.forEach((i) => {
areaTextArr.push(i.label);
});
console.log(areaTextArr);
},
?文章來源地址http://www.zghlxwxcb.cn/news/detail-653809.html文章來源：http://www.zghlxwxcb.cn/news/detail-653809.html
?
到了這里，關(guān)于element 的 el-cascader 組件獲取級聯(lián)選中l(wèi)abel和value值的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
