Vue.js
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

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

发布时间：2023-03-25 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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=&#39;selection'复选框全禁用(全选禁用)的文章就介绍到这了,更多相关element-ui table复选框全禁用内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的element-ui table使用type='selection'复选框全禁用(全选禁用)详解全部内容，希望文章能够帮你解决element-ui table使用type='selection'复选框全禁用(全选禁用)详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：elementui表格全选框禁用element table 复选框element ui 复选框"
猜你在找的Vue.js相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新Vue.js教程
热门Vue.js教程