vue.js3:用el-checkbox做复选框(vue@3.2.37 / element-plus@2.2.2)
Vue 2.2 Element Plus 3.2 el checkbox 37
2023-09-14 08:59:32 时间
一,js代码:
<template> <div> <div style="width:700px;margin:auto;display:flex;flex-direction: column;"> <div>请选择喜欢的角色:</div> <el-checkbox-group v-model="checkboxSetRole" style="width:700px;background: #ffff00;margin-top: 10px;"> <el-checkbox v-for="roleone in roles" :label="roleone.roleid" :key="roleone.roleid"> {{roleone.rolename}} </el-checkbox> </el-checkbox-group> <div style="margin-top: 10px;"><el-button @click="submitForm" style="width:100px;">提交</el-button></div> </div> </div> </template> <script> import {ref} from "vue" export default { name: "MyCheckbox", setup() { //选中的结果 const checkboxSetRole = ref([]); //复选框要显示的数组 const roles = ref([]); //添加数据到数组 let one = {roleid:"1",rolename:"老刘"}; roles.value.push(one); let two = {roleid:"2",rolename:"赵四"}; roles.value.push(two); let three = {roleid:"3",rolename:"谢广坤"}; roles.value.push(three); let four = {roleid:"4",rolename:"王老七"}; roles.value.push(four); //表单提交时得到复选框的值 const submitForm = () => { if (checkboxSetRole.value.length <= 0) { alert('请最少选择一个选项'); return; } let rolesvalue=checkboxSetRole.value.join(); alert("已选中:"+rolesvalue); } return { roles, checkboxSetRole, submitForm, } } } </script> <style scoped> /* 此处指定复选框的宽度 */ .el-checkbox.el-checkbox{ float:left; margin-left:10px; width: 190px; height: 25px; } </style>
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,测试效果
三,查看vue框架的版本:
root@lhdpc:/data/vue/imgtouch# npm list vue imgtouch@0.1.0 /data/vue/imgtouch ├─┬ @vue/cli-plugin-babel@5.0.6 │ └─┬ @vue/babel-preset-app@5.0.6 │ └── vue@3.2.37 deduped └─┬ vue@3.2.37 └─┬ @vue/server-renderer@3.2.37 └── vue@3.2.37 deduped
查看element-plus的版本:
liuhongdi@lhdpc:/data/vue/imgtouch$ npm list element-plus imgtouch@0.1.0 /data/vue/imgtouch └── element-plus@2.2.2
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue_(Router路由)-vue-router路由的基本用法
- VUE - vuex state的使用
- Vue - 定义使用组件
- vue.js3: 旋转图片并保存(vue@3.2.37)
- vue.js3: 自定义video垂直可拖动的进度条(vue@3.2.36)
- [Vue] Get up and running with vue-router
- vue.js3:用el-checkbox做复选框(vue@3.2.37 / element-plus@2.2.2)
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- 一个典型的Vue应用的App.vue
- 计算机毕设 SSM Vue的校园疫情师生防疫登记备案系统(含源码+论文)
- Vue如何动态配置img标签的图片源src
- 手把手教你如何构建Vue前端组件库
- Vue、Vuejs从入门到精通 | vue-router详解
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- 如何将vue项目打包为.apk文件
- Vue: vue-router路由