zoukankan      html  css  js  c++  java
  • element UI 调整表格行高

    使用element UI的table默认属性,绘制表格如下:

    该表格的行高太大了,于是想调小一些。

    查看官网的文档,table有几个属性,

    row-style:行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。类型:Function({row, rowIndex})/Object

    cell-style:单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。类型:Function({row, column, rowIndex, columnIndex})/Object

    header-row-style:表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。类型:Function({row, rowIndex})/Object

    header-cell-class-name:表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。类型:Function({row, column, rowIndex, columnIndex})/Object

    于是在el-table中增加四个属性(绿色字体):

    <el-table
            ref="zeroTable"
            v-loading="iLoading"
            :data="iTableData"
            :row-style="iRowStyle"
            :cell-style="iCellStyle"
            :header-row-style="iHeaderRowStyle"
            :header-cell-style="iHeaderCellStyle"
            :style="iStyle"
            :stripe="iStripe"
            :border="iBorder"
            :max-height="iMaxHeight"
            :height="iMaxHeight"
            :default-sort="iDefaultSort"
            :highlight-current-row="iHighLightCurRow"
            @row-click="TableRowClickHandle"
            @row-dblclick="TableDoubleRowClickHandle"
            @selection-change="TableMultipleSelectionHandle">

    因为四个属性的返回值类型是function或Object,所以我在methods中增加了四个函数:

    iRowStyle:function ({row, rowIndex}) {
        return 'height:35px';
    },
    iHeaderRowStyle:function ({row, rowIndex}) {
        return 'height:35px';
    },
    iCellStyle:function ({row, column, rowIndex, columnIndex}) {
        return 'padding:0px'
    },
    iHeaderCellStyle:function ({row, column, rowIndex, columnIndex}) {
        return 'padding:0px'
    }

    然后表格的展示效果变成如下:

    表格的行高修改成功

  • 相关阅读:
    Jetbrains IDE 中 compass sass 设置
    std::shared_ptr<void>的工作原理
    分辨率、DPI、PPI和屏幕尺寸,你都知道是啥么?
    《富爸爸,穷爸爸》阅读笔记
    [LeetCode] Interleaving String
    一致性哈希学习
    《精通正则表达式》笔记 --- “验证”Email格式
    字符串匹配算法
    [奇淫怪巧] 利用正则表达式判断素数
    《精通正则表达式》笔记 --- 选择引号内的文字
  • 原文地址:https://www.cnblogs.com/MrZhaoyx/p/11910772.html
Copyright © 2011-2022 走看看