• 背景。自定義表單。多選組件封裝。當選項被多選后，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>