elementUI 单选框样式改成多选框样式
时间: 2023-08-15 16:08:42 浏览: 328
你可以通过将 `el-radio` 组件替换成 `el-checkbox` 组件来将 ElementUI 的单选框样式改成多选框样式。具体操作如下:
1. 将原来的 `el-radio` 组件替换成 `el-checkbox` 组件。
2. 修改 `el-checkbox` 的属性:
- 将 `v-model` 属性绑定到一个数组上,用来存储选中的值。
- 添加 `label` 属性,用来指定当前 `el-checkbox` 的值。
3. 修改 `el-checkbox-group` 的属性:
- 将 `v-model` 属性绑定到一个数组上,用来存储选中的值。
- 添加 `min` 和 `max` 属性,用来限制可以选中的数量。
- 添加 `size` 属性,用来设置多选框的大小。
下面是一个示例代码:
```html
<template>
<div>
<el-checkbox-group v-model="checkedFruit" :min="1" :max="3" size="medium">
<el-checkbox label="apple">苹果</el-checkbox>
<el-checkbox label="banana">香蕉</el-checkbox>
<el-checkbox label="orange">橙子</el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
checkedFruit: []
}
}
}
</script>
```
在上面的代码中,我们将 `el-radio-group` 组件替换成了 `el-checkbox-group` 组件,并将 `v-model` 属性绑定到了一个数组上,用来存储选中的值。同时,我们也添加了 `label` 属性来指定当前 `el-checkbox` 的值,以及 `min` 和 `max` 属性来限制可以选中的数量,以及 `size` 属性来设置多选框的大小。
阅读全文