前言
昨天遇到一个elementUI select选择器组件的一个问题，如果 option 的 value 需要是一个对象该怎么处理呢？
我自己通过拼接字符串和裁剪实现了一种方式，但是查看官方文档以后，可以使用 value-key 进行对象的处理传递，后续还遇到了 value-key 没有唯一值的一个问题，特此记录，防止以后踩坑。
第一种，我自己的实现方案
...省略其他代码...
<el-select
v-model="family"
placeholder="请选择XXX"
clearable
v-blur
>
<el-option
v-for="(item, index) in positionGroup"
:key="index"
:label="item.name"
:value="`${item.code}/${item.sequence_code}`"
></el-option>
...省略其他代码...
data() {
return {
family: "" // v-model绑定的值
};
},
watch: {
family(val) {
if (val.indexOf("/") != -1) {
const arr = val.split("/");
this.form.family_code = arr[0];
this.form.sequence_code = arr[1];
}else{
this.form.code = "";
this.form.sequence_code = "";
}
}
},
...省略其他代码...
具体的逻辑其实就是通过字符串拼接的方式以 / 作为拆分的标识，在监听绑定对象时判断是否存在标识，通过标识来进行截取数组，然后进行赋值操作。
但是这样的操作其实是有很大问题的，在赋值的时候如果是2-3个还可以，如果有很多的话，拼接以后拆分的赋值也比较麻烦，还需要一些逻辑进行处理。
查看文档以后发现有更好的办法，下边就说下第二种的实现方式如何处理：
第二种，官方文档value-key处理
...省略其他代码...
<el-select
v-model="family"
placeholder="请选择XXX"
clearable
v-blur
value-key="code"
>
<el-option
v-for="(item, index) in positionGroup"
:key="index"
:label="item.name"
:value="{
code: item.code,
sequence_code: item.sequence_code
}"
></el-option>
</el-select>
...省略其他代码...
data() {
return {
family: {} // v-model绑定的值
};
},
watch: {
family(val) {
const { family_code, sequence_code } = val;
this.resignForm.family_code = family_code;
this.resignForm.sequence_code = sequence_code;
}
},
...省略其他代码...
文档中字段的描述：
官方文档里有这样一个说明，如果value要设置一个对象的话，value-key 是必填，而且 value 的赋值的对象里，必须要有 value-key 设置的值。
就像上边的代码设置的 value-key 是 code 那么下边value中赋值的时候也必须要有该值，不然就会报错。
但是遇到一个问题，数据格式是这样的：
{
"data": [{
"code": "C01",
"name": "名字1",
"sequence_code": ""
}, {
"code": "C02",
"name": "名字2",
"sequence_code": ""
}, {
"code": "C03",
"name": "名字3",
"sequence_code": ""
}, {
"code": "C04",
"name": "名字4",
"sequence_code": ""
},{
"code": "C04",
"name": "名字4-分类1",
"sequence_code": "C0401"
}, {
"code": "C04",
"name": "名字4-分类2",
"sequence_code": "C0402"
}, {
"code": "C04",
"name": "名字4-分类3",
"sequence_code": "C0403"
}]
}
如果使用 code 作为 value-key 的唯一标识的话是有问题的，code 不唯一，这个问题解决的话可以通过使用 index 来进行处理，具体处理的逻辑如下：
<el-select
v-model="family"
placeholder="请选择族群"
clearable
v-blur
value-key="index"
>
<el-option
v-for="(item, index) in positionGroup"
:key="index"
:label="item.family_name"
:value="{
index: index,
family_code: item.family_code,
sequence_code: item.sequence_code
}"
></el-option>
</el-select>
value-key 设置的值为 index，在 value 中新增一个 index 属性，保证当前选中的唯一性，其他的操作不用变化。
如果是多层循环嵌套的话尽量还是不要用 index 作为唯一标识，会和其他的循环有冲突的问题，可以在拿到数据的时候进行遍历，给一个唯一的 id 这样处理也是可行的。
结尾
往期vue相关文章：
如果你觉得有用能够解决遇到的类似的问题，你的点赞和评论评就是我前行的最大动力。
有错误或者有更好的方案，欢迎大家留言~
