为了账号安全,请及时绑定邮箱和手机立即绑定

Element el-check 多选框详解

标签:
Vue.js

1. 用途

多选框用来从备选的选项中选择任意多个,0个或者全部均可。

注意选择器(下拉选择框)也支持多选,相比与选择器,多选框的选项是全部显示在界面上的,而选择器需要点击下拉按钮才能显示全部选项。

2. 普通多选框

普通多选框v-model绑定一个变量,变量的值为true/false分别对应选中/未选中,示例如下:

HTML代码:

    普通多选框:
    <el-checkbox v-model="checkedBasketball">篮球</el-checkbox>
    <el-checkbox v-model="checkedFootball">足球</el-checkbox>
    <el-divider></el-divider>

JS代码:

	checkedBasketball: true,
    checkedFootball: false,

效果如下:
图片描述

3. 带边框的多选框

带边框的多选框样式更加富有科技感,但是用法是一样的。HTML代码部分添加border属性即可:

	带边框的多选框:
    <el-checkbox v-model="checkedBasketball" border>篮球</el-checkbox>
    <el-checkbox v-model="checkedFootball" border>足球</el-checkbox>
    <el-divider></el-divider>

效果如下:
图片描述

4. 多选框组

如果选项过多,每个多选框对应一个变量非常不方便,可以使用多选框组,统一绑定一个变量。变量的值即为选中项的label值的集合。

HTML代码:

  	多选框组,选中项{{checkList}}
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="basketball">篮球</el-checkbox>
      <el-checkbox label="football">足球</el-checkbox>
      <el-checkbox label="volleyball">排球</el-checkbox>
    </el-checkbox-group>
    <el-divider></el-divider>

JS代码:

    checkList: ['basketball', 'football'],

效果如下:
图片描述

5. 按钮样式的多选框组

可以将每个选项改为按钮样式,外观更加美观。

  	按钮样式多选框组
    <el-checkbox-group v-model="checkList">
      <el-checkbox-button label="basketball">篮球</el-checkbox-button>
      <el-checkbox-button label="football">足球</el-checkbox-button>
      <el-checkbox-button label="volleyball">排球</el-checkbox-button>
    </el-checkbox-group>
    <el-divider></el-divider>

效果如下:
图片描述

6. 多选框组选中数量限制

可以给多选框组设置最小、最大选中数量限制,这样可以不必通过js代码控制选中数量,更加简单。

当然实际上还是使用js控制更加灵活,我个人还是倾向于使用js代码。

HTML代码:

    多选框组选中数量限制
    <el-checkbox-group v-model="checkList2" :min="1" :max="2">
      <el-checkbox label="basketball">篮球</el-checkbox>
      <el-checkbox label="football">足球</el-checkbox>
      <el-checkbox label="volleyball">排球</el-checkbox>
    </el-checkbox-group>

JS代码:

    checkList2: ['basketball'],

效果如下:
图片描述

7. 选项通过变量自动生成

在实际项目中使用时,往往多选框的选项是根据后端发过来的数据决定的,是动态的,实例如下:

HTML代码:

  	动态生成选项,选中项{{courseSelected}}
    <el-checkbox-group v-model="courseSelected">
      <el-checkbox v-for="item in courseAll" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
    </el-checkbox-group>

JS代码:

 	courseAll: [{
        id: 1,
        name: "语文"
      },
      {
        id: 2,
        name: "数学"
      }],
      courseSelected: [],

效果如下:
图片描述

8. 小结

建议使用多选框组,代码和逻辑更加清晰。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
软件工程师
手记
粉丝
1.5万
获赞与收藏
1523

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消