element-ui table使用type='selection'复选框全禁用(全选禁用)详解

 更新时间:2023年01月19日 09:15:21   作者:帮帮我365  
element-ui中的table的多选很好用,但是如果其中某一项禁止选择,该怎样操作呢,下面这篇文章主要给大家介绍了关于element-ui table使用type='selection'复选框全禁用(全选禁用)的相关资料,需要的朋友可以参考下

问题总结:

 当条件数据全被禁用时,全选按钮也变成禁用的状态,而不是隐藏。有会做的小伙伴希望跟帖。谢谢!

复选框框架:

通过调用selectable方法,进行禁用复选框。

<!-- 复选框禁用 -->
<el-table 
v-loading="loading" 
:data="studentList" 
@selection-change="handleSelectionChange"
>
    <el-table-column 
    type="selection" 
    width="55" 
    align="center"
    :selectable="selectable"
    />
 
    <el-table-column label="编号" align="center" prop="studentId" />

1.指定行禁用:

    //复选框禁用
    selectable(row,rowIndex) {
      //索引是从0开始,条件1是指只有第2行数据不被禁用  
      if(rowIndex == 1){
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    }

效果:

2.条件禁用:

    //复选框禁用
    selectable(row,rowIndex) {
      //只有姓名【zhang】不被禁用
      if (row.studentName == "zhang") {
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    }

效果:

问题点:当条件数据全被禁用时,全选按钮不是禁用的状态。

    //复选框全部禁用
    selectable(row,rowIndex) {
      return false;
    }

效果:

复选框全被禁用时,全选按钮将被隐藏 

回避做法:

加了一个:header-cell-class-name属性,通过调用cellClass方法,当全被禁用时,全选按钮将被隐藏。

<!-- 复选框禁用 -->
<el-table 
v-loading="loading" 
:data="studentList" 
:header-cell-class-name="cellClass"
@selection-change="handleSelectionChange"
>
    <el-table-column 
    type="selection" 
    width="55" 
    align="center"
    :selectable="selectable"
    />
 
    <el-table-column label="编号" align="center" prop="studentId" />

实现:

定义一个参数DisableSelection:true,实现全选禁用。

export default {
  name: "Student",
  data() {
    return {
      // 全选按钮隐藏
      DisableSelection:true,
    }
  }
}

追加全选按钮的隐藏样式:

<style>
  .el-table .DisableSelection .cell .el-checkbox__inner{
          display: none;
          position: relative;
        }
  .el-table .DisableSelection .cell:before{
          content: "";
          position: absolute;
  }
</style>

追加全选按钮隐藏函数cellClass,启用隐藏样式:

    //全选按钮隐藏
    cellClass(row){
      row.length
        console.log(row)
          if(this.DisableSelection){
            if (row.columnIndex === 0) {
              return 'DisableSelection'
            }
          }   
    },

复选框当存在不禁用时,重置DisableSelection属性值:

    //复选框禁用
    selectable(row,rowIndex) {
      //所有行都被禁用
      if(rowIndex < 0){
        this.DisableSelection = false && this.DisableSelection;
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    },

效果:全被禁用时,全选按钮被隐藏

存在可选按钮场合:前两行可选。

    //复选框禁用
    selectable(row,rowIndex) {
      //前两行可选的状态
      if(rowIndex < 2){
        this.DisableSelection = false && this.DisableSelection;
        return true;  //不禁用
      }else {
        return false;  //禁用
      }
    },

当存在可选时,全选按钮被表示出来

问题总结: 

当条件数据全被禁用时,全选按钮也变成禁用的状态,而不是隐藏。

总结

到此这篇关于element-ui table使用type='selection'复选框全禁用(全选禁用)的文章就介绍到这了,更多相关element-ui table复选框全禁用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue打包路径配置过程

    Vue打包路径配置过程

    这篇文章主要介绍了Vue打包路径配置过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    这篇文章主要介绍了vue.js实现数据库的JSON数据输出渲染到html页面功能,结合实例形式分析了vue.js针对本地json数据的读取、遍历输出相关操作技巧,需要的朋友可以参考下
    2019-08-08
  • vue打包时不删除dist里的原有文件配置方法

    vue打包时不删除dist里的原有文件配置方法

    这篇文章主要为大家介绍了vue打包时不删除dist里的原有文件配置方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • vue结合el-dialog封装自己的confirm二次确认弹窗方式

    vue结合el-dialog封装自己的confirm二次确认弹窗方式

    这篇文章主要介绍了vue结合el-dialog封装自己的confirm二次确认弹窗方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-08-08
  • Vue中在新窗口打开页面及Vue-router的使用

    Vue中在新窗口打开页面及Vue-router的使用

    这篇文章主要介绍了Vue中在新窗口打开页面 及 Vue-router的使用,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • vue3数组或对象赋值不更新解决方法示例

    vue3数组或对象赋值不更新解决方法示例

    这篇文章主要为大家介绍了vue3数组或对象赋值不更新解决方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • vue3实现多个表格同时滚动并固定表头

    vue3实现多个表格同时滚动并固定表头

    这篇文章主要给大家介绍了vue3中多个表格怎么同时滚动并且固定表头,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • Vue3配置bem样式架构的代码详解

    Vue3配置bem样式架构的代码详解

    BEM是一种前端命名方法论,主要是针对CSS,意思是块(Block)、元素(Element)、修饰符(Modifier)的简写,这种命名方法让CSS便于统一团队开发规范和方便维护,本文给大家介绍了Vue3配置bem样式架构,需要的朋友可以参考下
    2024-10-10
  • vue 注释template中组件的属性说明

    vue 注释template中组件的属性说明

    这篇文章主要介绍了vue 注释template中组件的属性说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 解决keep-alive同一个组件不缓存问题

    解决keep-alive同一个组件不缓存问题

    这篇文章给大家介绍了如何解决keep-alive同一个组件不缓存问题,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02

最新评论