element组件多选框列表怎么写
时间: 2023-10-03 14:03:12 浏览: 50
如果你是使用 Vue.js 的 Element UI 组件库,可以按照以下步骤来创建多选框列表:
1. 导入需要使用的 Element UI 组件:
```html
<template>
<div>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
import { CheckboxGroup, Checkbox } from 'element-ui'
export default {
name: 'MultiCheckbox',
components: {
CheckboxGroup,
Checkbox
},
data() {
return {
checkedCities: [],
cities: ['北京', '上海', '广州', '深圳']
}
}
}
</script>
```
2. 在 `data` 属性中定义 `checkedCities` 数组,用于存储用户选择的城市列表,并在 `cities` 数组中定义城市列表。
3. 在模板中使用 `el-checkbox-group` 组件,并将 `v-model` 绑定到 `checkedCities` 数组上。然后使用 `v-for` 指令遍历 `cities` 数组,为每个城市创建一个 `el-checkbox` 多选框组件,并将城市名称作为 `label` 属性的值。
4. 用户选择的城市列表将存储在 `checkedCities` 数组中,可以通过 `this.checkedCities` 访问它。
这样就可以创建一个多选框列表了。