VueJs + Element UI: 如何使用 photo el-select 设置默认值?
VueJs + Element UI: How to set default value with photo el-select?
我有带照片的 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>
这是我的 fiddle:
选择的值模板和选项模板不同。 el-select
允许您为所选模板定义前缀槽,请查看:https://jsfiddle.net/budgw/L4y8zw1e/36/
请注意,我更改了您的 el-select
以便直接使用对象作为选定值。在这种情况下,您必须在 el-select
.
上指定 value-key
我有带照片的 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>
这是我的 fiddle:
选择的值模板和选项模板不同。 el-select
允许您为所选模板定义前缀槽,请查看:https://jsfiddle.net/budgw/L4y8zw1e/36/
请注意,我更改了您的 el-select
以便直接使用对象作为选定值。在这种情况下,您必须在 el-select
.
value-key