zoukankan      html  css  js  c++  java
  • 表格取消全选框,用文字表示--Echarts ElementUi

    1.先看看实现的图

    表格全选

    一. 添加添加复选框列

    
     <el-table  v-loading="zongShipLoading" tooltip-effect="dark" :header-cell-class-name="cellClass" height="350" ref="changeTable" @select="shipTableDataChange" :data="shipTableData">
          <el-table-column  type="selection" width="55"></el-table-column>
          <el-table-column property="vesselNameCn" label="中文名称"></el-table-column>
          <el-table-column property="vesselNameEn" label="英文名称"></el-table-column>
          <el-table-column property="mmsi" label="MMSI"></el-table-column>
          <el-table-column property="equipmentCode" label="设备编码"></el-table-column>
    </el-table> 
    
    

    二.给 方法(这个方法主要就是给表格所需要的列添加类名。)具体可以看ElementUi的表格API

    <el-table  :header-cell-class-name="cellClass"></el-table>
    
    
     cellClass(row){     
        if (row.columnIndex === 0) {           
         return 'disabledCheck'     
        } 
    },
    
    > 备注:cellClass()方法主要给复选框那一列添加 类名为 ‘disabledCheck’
    

    三.css样式设置

    /* 去掉全选按钮 */
    .el-table .disabledCheck .cell .el-checkbox__inner{
        display: none !important; 
    }
    
    .el-table .disabledCheck .cell::before{
        content: '选择';
        text-align: center;
        line-height: 37px;
    }
    

    本文来自博客园,作者:喆星高照,转载请注明原文链接:https://www.cnblogs.com/houxianzhou/p/13535735.html

  • 相关阅读:
    007 多元线性回归
    006 一元线性回归
    013 调整数组顺序使奇数位于偶数前面
    012 数值的整数次方
    011 二进制中1的个数
    010 矩形覆盖
    009 变态跳台阶
    008 调台阶
    007 斐波那契数列
    005 回归分析
  • 原文地址:https://www.cnblogs.com/houxianzhou/p/13535735.html
Copyright © 2011-2022 走看看