el-checkbox-group 去掉选中时边框颜色

这段代码是使用 Element UI 中的 `<el-checkbox-group>` 组件来创建一个多选框组，其中 `needRadio` 是该多选框组的 `v-model`，它绑定了一个数组。当用户选中或取消选中多选框时，`needRadio` 数组中的值会发生相应的变化。 具体来说，如果用户选中了 label 值为 1 的多选框，那么 `needRadio` 数组会被更新为 `[1]`。如果用户再选中 label 值为 2 的多选框，那么 `needRadio` 数组会变成 `[1, 2]`。如果用户取消选中 label 值为 2 的多选框，那么 `needRadio` 数组会变成 `[1]`。如果用户取消选中 label 值为 1 的多选框，那么 `needRadio` 数组会变成 `[]`。 在 Vue 组件中，当使用了 `v-model` 绑定一个数组时，该数组会被视为“双向绑定”，即界面上的变化会反映在数组中，数组中的变化也会反映在界面上。

### 解决 Element UI `el-table` 嵌套 `el-checkbox-group` 的必输校验问题 当在 `el-table` 中嵌套 `el-checkbox-group` 并设置为必填项时，可能会遇到即使选择了复选框也无法通过表单验证的情况。这通常是因为数据绑定和事件监听机制未能正确同步所导致。 为了确保 `el-checkbox-group` 正确触发必输校验，在表格初始化完成后应手动调用一次更新方法来刷新状态： ```javascript this.$nextTick(() => { this.$refs.checkboxGroup.clearValidate(); }); ``` 此外，还需确认 `v-model` 绑定的数据源已经正确反映用户的交互操作。对于每一行记录而言，应该维护一个独立的状态变量用于存储该行的选择情况，并将其传递给对应的 `el-checkbox` 控件[^1]。 如果仍然无法正常工作，则可以尝试自定义规则来进行更精确的控制。利用 `rules` 属性指定特定字段上的约束条件，并配合 `validateField()` 方法实现即时反馈功能[^2]。 最后值得注意的是，由于 `el-table-column` 默认不会渲染成标准 HTML 表格结构，因此某些情况下可能会影响内置表单控件的行为逻辑。此时建议调整模板布局方式或将验证逻辑移至父级组件处理。 ```html <template> <div class="demo-form"> <!-- 使用 ref 来获取 checkboxGroup 实例 --> <el-form :model="form" status-icon :rules="rules" ref="ruleFormRef"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column label="Selections"> <template slot-scope="{ row }"> <el-checkbox-group v-model="row.selectedItems" @change="handleChange(row)"> <el-checkbox v-for="(item, index) in options" :key="index" :label="item">{{ item }}</el-checkbox> </el-checkbox-group> </template> </el-table-column> </el-table> <el-button type="primary" @click="submitForm">Submit</el-button> </el-form> </div> </template> <script lang="ts"> import { defineComponent, reactive, toRefs } from 'vue'; export default defineComponent({ setup() { const state = reactive({ form: {}, tableData: [ { name: 'Row 1', selectedItems: [] }, { name: 'Row 2', selectedItems: ['Option A'] } ], rules: { // 自定义校验规则 selectionRule({ value }) { return new Promise((resolve, reject) => !value.length ? reject(new Error('Please select at least one option')) : resolve() ); } }, options: ['Option A', 'Option B'] }); function handleChange(row) { // 手动触发表单项重新校验 setTimeout(() => { (state.ruleFormRef as any).validateField(`selectionRule`); }, 0); } function submitForm() { (state.ruleFormRef as any).validate(valid => { console.log('Validation result:', valid); }); } return { ...toRefs(state), handleChange, submitForm }; } }); </script> ```