症状是选择的时候会同时选取所有的选项,同时控制台报错<transition-group> children must be keyed: <ElTag>
。
简而言之,是因为没有指定el-select的value-key属性,或者没有正确指定el-select的value-key属性。按照官网的说法:
如果 Select 的绑定值为对象类型,请务必指定
value-key
作为它的唯一性标识。
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value-key | 作为 value 唯一标识的键名,绑定值为对象类型时必填 | string | — | value |
正确的使用方法如下:
<template>
<!--value-key的值对应于item里的唯一字段-->
<el-select v-model="value"
value-key="label">
<el-option v-for="item in options"
:label="item.label"
:key="item.label"
:value="item"/>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}],
value: {}
}
}
}
</script>
如果允许同时选择多个选项,添加multiple属性,并且把value改成[]
即可:
<template>
<el-select v-model="value"
value-key="label"
multiple>
<el-option v-for="item in options"
:label="item.label"
:key="item.label"
:value="item"/>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}],
value: []
}
}
}
</script>
可能还有一个需要注意的地方,就是value-key的位置,一定要放在el-select上,而不是el-option上;放错位置是不会生效的。