<el-checkbox-group v-model="selectedOptions">
<el-checkbox v-for="item in targetOptions" :key="item.id" :label="item.id"
@change="(value) => handleChangeTarget(value, item.id)" >
<span>{{ item.title }}</span>
<el-input-number placeholder="请输入%" size="mini" style="width: 50%" :min="0" :controls="false"
v-if="selectedOptions.includes(item.id)" v-model="targets[item.id]"
@change="(currentValue, oldValue) =>onInputNumChange(currentValue, oldValue, item.id)" />
</el-checkbox>
</el-checkbox-group>
// 相应的model
selectedOptions: [], // 选中的选项
targets: {}, // input值的组装
targetOptions: [], // 从后端装入的选项数据
注意： label 选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效），el-checkbox的label为放入selectedOptions中的值，
通常为id
onInputNumChange(currentValue, oldValue, targetId) {
this.targets[targetId] = currentValue;
}
handleChangeTarget(value, targetId) {
if (value) {
this.targets[targetId] = 0;
} else {
delete this.targets[targetId];
}
}
未经允许不得转载：
红吉他 »
HTML5 »
el-checkbox与el-input联合使用