VueJs + Element UI：如何使用照片 el-select 设置默认值？答案

【问题标题】：VueJs + Element UI: How to set default value with photo el-select?VueJs + Element UI：如何使用照片 el-select 设置默认值？
【发布时间】：2018-11-14 14:45:05
【问题描述】：

我有带照片的 el-select 选项，在选项中我可以获取照片变量，但在默认值中我无法通过照片获取默认值。

你能帮帮我吗？

预期：默认值为 McDonald（照片 + 标签）

这是我的代码：

<el-select v-model="value" placeholder="Select">
   <el-option v-for="item in outlet" :key="item.value" :label="item.label" :value="item.value">
     <img :src="item.photo"> {{ item.label }}
   </el-option>
</el-select>

这是我的小提琴：

https://jsfiddle.net/dede402/L4y8zw1e/10/

【问题讨论】：

标签： vuejs2 element-ui

【解决方案1】：

选择的值模板和选项模板不同。 el-select 允许您为所选模板定义一个前缀槽，看看：https://jsfiddle.net/budgw/L4y8zw1e/36/

请注意，我更改了您的 el-select 以便直接使用对象作为选定值。在这种情况下，您必须在 el-select 上指定 value-key。

【讨论】：