web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. AIGC工具
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站
    手机应用

el-checkbox点击全选后再点击单选功能错乱解决方法

987 ℃

el-checkbox点击全选后再点击单选全部被取消,再点击单选有全部被选中,有可能是你点击全选的时候赋值出错了,下面是解决方法!

el-checkbox多选、全选代码如下:

<el-checkbox-group v-model="rulesCheck" @change="handleCheckChange">
<el-checkbox 
  v-for="(item, index) in ruleBox.rulesList"
  :label="item" 
  :key="index" 
  style="width: 100%">{{ item }}
  </el-checkbox>
</el-checkbox-group>
<el-checkbox
  :indeterminate="isIndeterminate"
  v-model="checkAll"
  @change="handleCheckAllChange">全选
</el-checkbox>

js代码

handleCheckAllChange(val) {
  this.rulesCheck = val == true ? this.rulesList : [];
  this.isIndeterminate = false;
  
  //注意val不是选中的值,是boolean类型true/false;
  //this.rulesCheck放选中的数组,出现问题的同学有可能把val赋值到这里了;
  //this.rulesList是所有数据
},

利用纯js实现表格全选功能

vue如何利用computed实现全选功能

el-table实现相同name可以多选否则单选

javascript实现checkBox单选

el-table 单项type="selection"出现数据错乱解决

标签: el-checkbox, 代码错乱, 全选, 单选

上面是“el-checkbox点击全选后再点击单选功能错乱解决方法”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_2366.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > vuejs
本文共计602个字,预计阅读时长5分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一款宝藏型工具应用类网站——一个木匣
下一篇: 推荐一款拥有江西情怀的免费可商用字体——江西拙楷体
x 打工人ai神器