Elementui 多选框选择全部和取消选择

爱被打了一巴掌 2022-11-10 05:36 886阅读 0赞

*  点击（不限），取消选中其他多选项。![20210316161626327.png][]
 *  点击其他选择项，取消（不限）选中。![20210316161645300.png][]
 *      //html部分
        <el-col>
            <el-checkbox-group v-model="checkboxDept" size="small" @change="CheckedDept">
                <el-checkbox-button class="borderCheck" v-for="(item, index) in TypeList" :label="item.name" :key="item.name">{
             {item.name}}
                </el-checkbox-button>
            </el-checkbox-group>
        </el-col>
        
        //js
        //选择发文部门
              CheckedDept(val) {
                if (val.length === 0) {
                 <-- 没选择默认选中不限 -->
                  this.checkboxDept = ["不限"];
                } else if (val[val.length - 1] === '不限') {
                 <-- 选中不限，则取消其他全部选项 -->
                  this.checkboxDept = ["不限"];
                } else if (val[val.length - 1] !== '不限') {
                 <-- 选中其他项，则取消选中不限 -->
                  for (let i = 0; i < val.length; i++) {
                    if (val[i] === "不限") {
                      this.checkboxDept.splice(i,1)
                    }
                  }
                }
              },

[20210316161626327.png]: /images/20221023/2594d9e7f3f34883964e6218c556a2c1.png
[20210316161645300.png]: /images/20221023/ac34ad4a3327469480c41c0be62789e1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，886人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element选择框多选时增加全选按钮

要实现的目标，即在选择框的基础上，实现多选框的效果 1. 最重要的一点是，新旧值的保存，且值的变化只能通过Element提供的方法去获取，不能通过Vue事件监听，因为要

冷不防/ 2023年06月19日 07:18/ 0 赞/ 5 阅读

相关 elementUI-日期选择器（单个框限制选择范围、快捷键选择）

.el-input { width: 30%; margin-right: 20px; } <div id="page">

刺骨的言语ヽ痛彻心扉/ 2022年11月27日 03:07/ 0 赞/ 704 阅读

相关 Elementui 多选框选择全部和取消选择

点击（不限），取消选中其他多选项。![20210316161626327.png][] 点击其他选择项，取消（不限）选中。![20210316161645300.p

爱被打了一巴掌/ 2022年11月10日 05:36/ 0 赞/ 887 阅读

相关 ElementUI Checkbox 多选框

一、概述适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。二、代码实现 test.vue <template>

我会带着你远行/ 2022年11月02日 15:29/ 0 赞/ 328 阅读

相关 JS 实现列表与多选框选择

1功能预览 ![1412931059_9963.gif][] 2html代码 <span> <tr> <td><img

待我称王封你为后i/ 2022年08月13日 01:59/ 0 赞/ 242 阅读

相关单选框多选框，选择发生改变触发

开通博客已有好长一段时间，太懒，一直没有去写。近来公司最为要好的一前端小伙伴要离职，忙得不可开交，所以也就不得不自己做页面。当然，也是他告诉我，要写自己的博客，作为技术进步的见

分手后的思念是犯贱/ 2022年08月08日 13:50/ 0 赞/ 332 阅读

相关一步选择或者取消所有的复选框

有些时候为了方便，需要check all选择所有复选框，或者取消所有的复选框，但是如果选项太多的话，又不想点击鼠标一个个实现，这样子我们就可以应用到下面的代码来实现以上的功能。

客官°小女子只卖身不卖艺/ 2022年07月12日 12:27/ 0 赞/ 138 阅读

相关 ElementUI中的Table和collapse实现checkbox的多选和取消选择

最近项目中用到了Vue+ElementUI,就试着写了一些基本功能，坑真多。废话不多说了，直接上代码 1、Vue+ElementUI+el-table实现复选框的多选和取

小灰灰/ 2022年05月21日 01:46/ 0 赞/ 546 阅读

相关 Java选择框和单选按钮

选择框、单选框和单选按钮都是选择组件，选择组件有两种状态，一种是选中(on)，另一种是未选中(off)，它们提供一种简单的 “on/off”选择功能，让用户在一组选择项目中作选

深碍√TFBOYSˉ_/ 2022年05月16日 03:46/ 0 赞/ 270 阅读

相关 vue.js实现复选框选中取消获取选择值

<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Content-typ

╰半橙微兮°/ 2021年12月01日 12:16/ 0 赞/ 451 阅读