ElementUI el-select绑定对象报错<transition-group> children must be keyed: <ElTag>的解决方案

症状是选择的时候会同时选取所有的选项，同时控制台报错<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上；放错位置是不会生效的。