vue elementUI中级联选择器获取label值？
需求是获取级联选择器的lable 将label赋入到别的div中，如下图：
思路：提交表单，我是将更换配件作为一个字段传给后台，然后将下边的数据和input框的数据组成[{}]格式的传给后台，首先获取更换配件的id值，然后获取到节点的信息，比较两者id是否相同，然后进行赋值
直接看代码更为清晰：
<template>
<div class="content">
<el-form ref="testRef" :model="testform" label-width="80px">
<el-form-item label="更换配件">
<el-cascader
ref="partRef"
:options="options"
:props="props"
clearable
:show-all-levels="false"
@change="changeHandle"
v-model="testform.partsValue"
></el-cascader>
</el-form-item>
<div
style="display: flex"
v-for="(item, index) in partsList"
:key="index"
>
<div class="test-num">{{ item.name }}</div>
<input type="text" name="" id="" v-model="item.num" />
</div>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
testform: {
partsValue: [],
},
partsList: [],
partNum: "",
partsName: "ssss",
props: { multiple: true },
options: [
{
value: 1,
label: "东南",
children: [
{
value: 2,
label: "上海",
children: [
{ value: 3, label: "普陀" },
{ value: 4, label: "黄埔" },
{ value: 5, label: "徐汇" },
],
},
{
value: 7,
label: "江苏",
children: [
{ value: 8, label: "南京" },
{ value: 9, label: "苏州" },
{ value: 10, label: "无锡" },
],
},
{
value: 12,
label: "浙江",
},
],
},
{
value: 17,
label: "西北",
children: [
{
value: 18,
label: "陕西",
children: [
{ value: 19, label: "西安" },
{ value: 20, label: "延安" },
],
},
{
value: 21,
label: "新疆维吾尔族自治区",
},
],
},
],
};
},
mounted() {},
methods: {
changeHandle(value) {
let idArr = [];
for (let i = 0; i < value.length; i++) {
idArr.push(value[i][value[i].length - 1]); // 获取到二维数组中每个数组中的最后一项id
}
let names = this.$refs.partRef.getCheckedNodes();
let nameArr = [];
for (let i = 0; i < idArr.length; i++) {
let obj = {};
for (let j = 0; j < names.length; j++) {
if (idArr[i] == names[j].value) { // 比较两者的id是否相等
obj["name"] = names[j].label;
obj["id"] = names[j].value;
obj["num"] = "";
}
}
nameArr.push(obj);
}
console.log(nameArr,'nameArr')
this.partsList=nameArr;
},
},
};
</script>
<style scoped>
.content {
width: 100%;
height: 100%;
}
.test-num {
padding: 10px;
height: 30px;
border: 1px solid #000;
margin-left: 15px;
}
</style>
希望能够帮助到你，有问题也可以提出建议哦😊
