• 背景。自定义表单。多选组件封装。当选项被多选后，el-checkbox-group中v-model的值以数组形式存储了选中的内容。
• 奇葩问题。存储的值时label属性。而渲染时需要使用插值单独将选项的名称渲染出来。而在el-checkbox标签中:label要赋值option.value
• 很别扭。

<template><el-form-item :required="required" :label="label"><el-checkbox-groupv-model="localValue"@change="handleCheckedChange":disabled="disabled":class="{'checkbox-vertical': alignDirection === 'vertical','checkbox-horizontal': alignDirection === 'horizontal'}"><div v-for="option in options" :label="option.label" :key="option.value"><el-checkbox :label="option.value" :key="option.value" @change="handleCheckedBoxChange(option, $event)">{{option.label}}</el-checkbox><el-input v-if="checkedOther" placeholder="添加其他内容"></el-input></div></el-checkbox-group></el-form-item>
</template><script>
export default {props: {label: String,options: {type: Array,required: true,default: () => []},value: {type: String,default: ''},required: {type: Boolean,default: false},disabled: {type: Boolean,default: false},/** 排列方式. horizontal: 水平排列, vertical: 垂直排列 */alignDirection: {type: String,default: 'vertical'}},data() {return {localValue: [],// 是否勾选了其他选项checkedOther: false};},created() {// console.log('checkbox.value:', this.value);},watch: {value(val) {// this.localValue = val;// // console.log('checkbox.value:', val);},checkedOther(val) {// console.log('checkbox.checkedOther:', val);}},methods: {handleCheckedChange(value) {this.$emit('change', value);},handleCheckedBoxChange(option, checked) {this.checkedOther = checked && option.remark === 'other';}}
};
</script><style scoped>
.checkbox-horizontal {display: flex;flex-direction: row;flex-wrap: wrap;gap: px;
}.checkbox-vertical {display: flex;flex-direction: column;gap: 5px;
}/* .checkbox-horizontal .el-checkbox {margin-right: 10px;margin-bottom: 0;
}.checkbox-vertical .el-checkbox {margin-bottom: 10px;
} */
</style>