当前位置: 首页> 汽车> 行情 > element-plus的form表单组件之checkbox组件

element-plus的form表单组件之checkbox组件

时间:2025/7/9 16:09:54来源:https://blog.csdn.net/lucky_ly/article/details/139786034 浏览次数: 0次

单个checkbox 绑定的响应式的值类型为bool类型,同一个组的checkbox多选其值对应值的数组,类型根据checkbox的value值而来。

label只用来显示具体的值,根据value属性来设置。

element-plus的checkbox提供多种特性。

如单选,多选,
限制最小选的,和最大选择数量
checkbox结合button展示等,是否有边框,是否禁用等。

<script setup lang="ts">
import { onMounted, ref } from 'vue'const val=ref('beijin');const cities=ref(['beijin','shanghai','guangzhou','shenzhen']);const selectedCities=ref(['beijin','shenzhen']);const valueChangeEvent =(values:string[])=>{console.info(values);
}</script><template><div><el-row><el-checkbox label="beijin" v-model="val"></el-checkbox></el-row><el-row><el-checkbox-group v-model="selectedCities" min="2" max="3" ><el-checkbox v-for="city in cities" :key="city" :label="city" :value="city"></el-checkbox></el-checkbox-group></el-row><el-row><el-checkbox-group v-model="selectedCities" min="2" max="3" size="large" ><el-checkbox-button v-for="city in cities" :key="city" :label="city" :value="city"></el-checkbox-button></el-checkbox-group></el-row></div></template><style scoped></style>

在这里插入图片描述
https://element-plus.org/zh-CN/component/checkbox.html#checkboxbutton-attributes

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

关键字:element-plus的form表单组件之checkbox组件

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: