el-select的正确用法

下拉框应该是大家非常常用的一个组件，表单几乎离不开它，可是用了三年后我突然发现我一直没有正确的使用它。。。。。

ElementUI 组件一直让我纠结的地方是 绑定的值对我来说经常需要绑定值的其他字段信息，而这个信息我一直以来都是通过code值重新find，实际上el-select 的 v-model可以直接绑定对象，通过value-key来指定关键字。

 

 

   <el-select v-model="rpdComboModel" placeholder="请选择" value-key="EpCode" @change="handleSelectChange">
      <el-option v-for="(item,index) in rpdComboData" :label="item.EpDesc" :value="item" :key="index"></el-option>
    </el-select>

// 定义数据：
rpdComboData: [
        { EpCode: 1, EpDesc: '未开始' },
        { EpCode: 2, EpDesc: '已开始' },
        { EpCode: 3, EpDesc: '已结束' }
      ],
      rpdComboModel: { EpCode: 1, EpDesc: '未开始' }

// change的处理事件
handleComboChange(val) {
      console.log('handleComboChange', val)
    },