Vue2 element selection组件设置默认选项

---

前言

情况是多个下拉选项, 设置首个选项为默认选项, 不使用placeholder, 双向绑定可以拿到默认值, 和多个参数.

---

一、场景

一个挺头疼的情况, 这个下拉选择框的可选项是请求过来的, 每个选项是一个对象, 里面包含了选项文字在内的好多个属性.
大致如此:

[
  {label: "", value: "", attr1: "", attr2: ""},
  {label: "", value: "", attr1: "", attr2: ""}
  {label: "", value: "", attr1: "", attr2: ""},
]
1
2
3
4
5

我本可以给每个item绑定一下value然后v-model等着拿值的, 但我需要通过v-model拿到的值来做请求, 额, 而且需要的并不是展示在item上的文字, 而是这个item对象里的另一些属性, 那么我要在用户选择一项时通过v-model拿到这些属性.

1.设置默认选项

我需要设置第一项为默认选项, 而v-model存在绑定的值时,placeholder会失效, 而且placeholder也并不能让v-model那边实际获取到值所以不能用placeholder. 这意味着我得让v-model绑定的属性的初始值与第一项的value值相同, 就相当于一开始我们就选了第一项…

前面说到我需要item中的多个其他属性 所以我的value需要是一个数组, 就像这样(没必要和我一样用数组, 如果你不需要拿别的数据):

<el-option
  v-for="(item, index) in selectiveEvents"
  :label="item.isaacCode + ':' + item.isaacName"
  :value="[item.saccCode, item.acctId]"
  :key="index"
>
1
2
3
4
5
6

这样一来就好了, 用户选取后我可以拿到一个正常的数组, 用户也能看到正常的文字, 但是拿到初始选项的value值是一个问题.

2.绑定默认值

v-model在初始也需要被设置为一个数组才可以达到拿到value值点击提交表单做请求的效果, 而这样做的代价是用户会看到默认选项是一些乱七八糟的数据而不是正常的文字, 因为el-select并不能根据一个数组或者对象就判定出这个数组里的数据属于哪个item继而选中一个item渲染, 我们给v-model绑定的属性赋初始值属于是将常规情况下先选中item后赋值的流程反过来进行.
而v-model设置文字的话会提交可视的文字上去, 用户不操作的话我拿不到数据, 请求又不行了.
所以初始情况下赋值数据观感差, 展示出来的是数据, 也可以拿到数据.
赋值文字观感好但是拿不到数据.
这个小缺陷还是比较好处理的.

---

二、解决方法

绑数据就渲染数据了, 这个我觉得不好改动…
我选择了给v-model绑定的属性赋初始值为文字(也就是res[0].num + ':' + res[0].label这样的), 至于我拿什么值做请求, 在请求前我可以依然可以依据这些文字去判定.
比如提交请求之前判定v-model绑定的属性的值的长度或其他格式之类, 如果异常那么判定为默认参数提交, 把默认参数替换为应当的参数后提交.

---

总结

正常绑定v-model即可, 然后v-model初始值设置为默认选项的文字, 用到v-model的绑定值的时候再另外判定一次.