在Element UI中,使用el-form-item
和el-checkbox-group
组件来创建一个多选框表单项。以下是一个简单的例子:
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="爱好">
<el-checkbox-group v-model="form.hobbies">
<el-checkbox label="足球" name="type"></el-checkbox>
<el-checkbox label="篮球" name="type"></el-checkbox>
<el-checkbox label="游泳" name="type"></el-checkbox>
<el-checkbox label="编程" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
hobbies: []
}
};
}
};
</script>
在这个例子中,form.hobbies
是一个数组,用来绑定被选中的多选框的值。用户可以选择一个或多个爱好。当表单提交时,form.hobbies
数组将包含所有选中的爱好标签。