Element组件el-select使用

1.一般情况下，使用el-select都是显示label，传递value给后端。

<el-select v-model="souceData.ywMenu" multiple class="inputStyle" placeholder="请选择">
    <el-option
      v-for="item in activitiPage"
      :key="item.menuId"
      :label="item.menuName"
      :value="item.menuId"
    >
    </el-option>
  </el-select>

2.如果后端需要前端传给数据对象(换言之，el-option里的value是整个item对象怎么办)。文档提供了value-key属性，写在el-select上，值为item里的某个唯一的属性(方便diff算法解析)

<el-select v-model="souceData.ywMenu" value-key="menuId" multiple class="inputStyle" placeholder="请选择">
    <el-option
      v-for="item in activitiPage"
      :key="item.menuId"
      :label="item.menuName"
      :value="item"
    >
    </el-option>
  </el-select>

如上代码，只需要alue-key="menuId"，同时el-option里的:value="item"即可 3.如果需要更改value的参数,即自定义value里对象的数据格式，可以使用如下方法

<el-select v-model="souceData.ywMenu" value-key="menuId" multiple class="inputStyle" placeholder="请选择">
    <el-option
      v-for="item in activitiPage"
      :key="item.menuId"
      :label="item.menuName"
      :value="{id:item.menuId,name: item.menuName}"
    >
    </el-option>
  </el-select>

如上代码，只需要将value进行重新定义即可:value="{id:item.menuId,name: item.menuName}"