<el-form-item label="集群服务" prop="services"> <el-checkbox-group v-model="checkList" :value="checkList" @change="changeCheckbox"> <el-button v-for="item in servicesList" :key="item" :label="item" :placeholder="item"></el-button> </el-checkbox-group> </el-form-item>。将每一个按钮都替换为选择框,选择框可以取消选择,每个选择框可以自定义内容
时间: 2023-11-11 20:42:34 浏览: 188
Vue: 多个el-select不能重复选择相同属性
如果您想要将每个按钮替换为选择框,并且选择框可以取消选择,并且每个选择框可以自定义内容,您可以按照以下方式修改代码:
```html
<el-form-item label="集群服务" prop="services">
<el-checkbox-group v-model="checkList" @change="changeCheckbox">
<el-checkbox v-for="item in servicesList" :key="item" :label="item" :placeholder="item"></el-checkbox>
</el-checkbox-group>
</el-form-item>
```
在上面的代码中,我们将 `<el-button>` 替换为 `<el-checkbox>`,这样每个按钮就变成了一个选择框。使用 `v-for` 指令遍历 `servicesList` 数组,为每个选择框提供一个 `item`。我们使用 `:label` 属性将 `item` 绑定到选择框的值,并使用 `:placeholder` 属性将 `item` 作为选择框的标签显示。
注意,在这里我们不再使用 `:value="checkList"` 绑定初始值,因为 `v-model` 已经实现了双向绑定。
确保在 Vue 组件中定义了 `servicesList` 数组和 `checkList` 数组,并实现了 `changeCheckbox` 方法来处理选择框的变化。
这样,每个选择框都可以取消选择,并且您可以在每个选择框中自定义内容。
阅读全文