el-select参数的问题

el-select

1. 之前我对element-ui的使用比较浅显,在项目中遇到一些复杂的情况就不知道怎么处理了,直接说问题
2. element-ui 的 el-select

   v-model的值为当前被选中的el-option的 value 属性值
   <template>
     <el-select v-model="value" placeholder="请选择">
       <el-option
         v-for="item in options"
         :key="item.value"
         :label="item.label"
         :value="item.value">
       </el-option>
     </el-select>
   </template>
   

   • 显而易见,当el-select选中的时候,我们通过v-model的获取到的值就是el-option的value的值, 一般这个值是一个id,用来用来区分id对应的label到底是什么.
   • 一般来说,我们拿到这个id,后台就能通过这个id标识用户选中的label是什么,但是目前我遇到一个问题, 业务场景是这样的,用户通过下拉框,把选中的东西添加到数组中,然后提交数组中的内容,用于保存配置. 如果遇到这样的情况,仅仅只拿到id是不够的,因为对于后台而言,他需要id就够了,但是对于用户而言,如果你把id渲染到表格中,用户是看不懂的,这时我们就会有一个想法: 要是我能在select选中的时候,同时拿到id和label该多好啊!
   • 是的,之前我都是通过循环数组,然后手动吧id变成对应的label,最后渲染到列表中,这样实在是太麻烦了,而且有一个致命的问题,如果有很多条数据,你用手动添加改变label的值的话,一天就别干别的了(而且恶心)
3. value-key
   • 是的,解决的办法就是value-key
     
   • 在ele的官方文档上说了,如果我们在el-select选中的时候,不仅仅只拿到一个id,而是想拿到一个对象,并且这个对象中有我们需要的数据.只需要增加一个行间属性:value-key.即可.俗话说的好,小孩子才做选择,像我们一般是全都要
   • 上代码

   	<el-select v-model: data value-key:id>
   	    <el-option v-for='(item,index) in array' :key='index' :value='item' :label='item.title'> </eloption>
   	 </el-select >
   

   • 就是这么一个小东西,解决了我便秘的问题.简单来说,就是在el-select的行间添加一个value-key这个属性,属性绑定一个唯一值,并且在el-option中,value绑定的值直接为循环的数组项即可
   • 这样就拿到了我们所有需要的数据,之后想用什么就取什么岂不是美滋滋?