element-plus 多选框
时间: 2024-09-04 14:03:59 浏览: 71
Element Plus是一个基于Vue.js的UI组件库,它是由饿了么团队开发并开源的。其中的多选框组件是一种让用户可以选择多个选项的交互元素,通常用于表格、列表等场景中,用户可以勾选他们需要的内容。
在Element Plus的`el-checkbox-group`组件中,你可以创建一组相互独立的复选框,每个复选框都有一个唯一的值。使用者可以直接通过HTML标签`<el-checkbox>`添加单个选项,然后将它们包含在一个`<el-checkbox-group>`标签内,设置`v-model`属性关联到你的数据模型,这样当用户操作选择框时,数据模型会实时更新。
例如:
```html
<template>
<div>
<el-checkbox-group v-model="selectedOptions">
<el-checkbox label="Option 1">Option 1</el-checkbox>
<el-checkbox label="Option 2">Option 2</el-checkbox>
<el-checkbox label="Option 3">Option 3</el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: ['Option 1', 'Option 3'], // 默认选中的选项
};
},
};
</script>
```
阅读全文