el-button 怎么实现选中多个
时间: 2024-03-26 12:39:12 浏览: 91
el-select 下拉框多选实现全选的实现
el-button 组件默认是单选的,只能选中一个按钮。如果需要实现多选,可以使用 el-checkbox-button 或 el-radio-button 组件来实现。
el-checkbox-button 组件是一个复选框按钮组件,可以同时选中多个按钮。你可以在 el-checkbox-button 组件上设置 v-model 绑定一个数组,来实现多选功能,例如:
```
<template>
<div>
<el-checkbox-button v-model="selected" label="option1">选项1</el-checkbox-button>
<el-checkbox-button v-model="selected" label="option2">选项2</el-checkbox-button>
<el-checkbox-button v-model="selected" label="option3">选项3</el-checkbox-button>
</div>
</template>
<script>
export default {
data() {
return {
selected: [] // 用来存储选中的选项
}
}
}
</script>
```
在上面的例子中,我们使用了 el-checkbox-button 组件,并将 v-model 绑定到一个数组 selected 上,从而实现多选功能。
同样的,你也可以使用 el-radio-button 组件来实现多选功能,只需要将 type 属性设置为 'is-button' 即可。例如:
```
<template>
<div>
<el-radio-button v-model="selected" :label="option1" type="is-button">选项1</el-radio-button>
<el-radio-button v-model="selected" :label="option2" type="is-button">选项2</el-radio-button>
<el-radio-button v-model="selected" :label="option3" type="is-button">选项3</el-radio-button>
</div>
</template>
<script>
export default {
data() {
return {
selected: [] // 用来存储选中的选项
}
}
}
</script>
```
在上面的例子中,我们使用了 el-radio-button 组件,并将 type 属性设置为 'is-button',从而将单选按钮转换为多选按钮。同时,我们将 v-model 绑定到一个数组 selected 上,来实现多选功能。
阅读全文