element-ui使用select组件同时选中多个值

发现问题

首先我们来看一段最基本的el-select代码

<el-select v-model="selectedValue" placeholder="请选择">
    <el-option
      v-for="item in food"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
</el-select>

<script>
  export default {
    data() {
      return {
        food: [
        ...
        ...
        ],
        selectedValue: '',
      }
    }
  }
</script>

这时候我们选择某个选项的时候，我们选中的值也即selectedValue的值就是item.value
例如某个业务有如下数据

       food: [{
          foodid: 1,
          foodname: '黄金糕'
        }, {
          foodid: 2,
          foodname: '双皮奶'
        }, {
          foodid: 3,
          foodname: '蚵仔煎'
        }]

但是业务需要既选中foodname用于填充表格，又需要选中foodid用于其他异步请求
这时候v-model只能双向绑定一个值，就很难受

解决办法

方法一（笨方法）

elementUI的select组件提供了一个change的event，当选中值发生变化时触发，利用这个event，每次选中了foodname，通过foodname再去查照倒推foodid

方法二（官方好方法）

直接把object对象作为选中的值并且双向绑定一个对象，这样就同时有的foodid和foodname，但是因为双向绑定的是一个object对象，下拉菜单每个选项总不能显示一个对象吧，所以需要一个value-key属性指定选项显示的值，如下

<el-select v-model="selectedObject" value-key="id" placeholder="请选择">
    <el-option
      v-for="item in food"
      :key="item.foodid"
      :label="item.foodname"
      :value="item">
    </el-option>
</el-select>

<script>
  export default {
    data() {
      return {
        food: [{
          foodid: 1,
          foodname: '黄金糕'
        }, {
          foodid: 2,
          foodname: '双皮奶'
        }, {
          foodid: 3,
          foodname: '蚵仔煎'
        }],
        
        selectedObject: {
          id: 0,
          name: ''
        },
      }
    }
  }
</script>

这样每次选中的就是selectedObject对象，然后value-key="id"的意思是通过selectedObject.id来匹配item.foodid，成功匹配到item后，选项显示item.foodname

有点像是方法一的自动化版本，elenmentui帮我们实现了这个匹配的过程哒！通过选中且v-model双向绑定的selectedObject，我们就能在其他地方轻易拿到selectedObject里边的id和name两个属性啦！