(Element UI 组件 Table )如何给表格添加样式

    科技2024-01-04  143

    在使用 Element UI 设计表格的时候,如果没有特别修饰,表格的风格可能是如下这样的,但有时候我们也需要添加一些样式。

     

    查阅官方文档,我们发现如下属性。主要是以 row、cell、header-row、header-cell 进行分类来控制样式。

    参数说明类型可选值默认值row-class-name行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。Function({row, rowIndex})/String//row-style行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。Function({row, rowIndex})/Object//cell-class-name单元格的 className 的回调方法,也可以使用字符串为所有单元格设置一个固定的 className。Function({row, column, rowIndex, columnIndex})/String//cell-style单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。Function({row, column, rowIndex, columnIndex})/Object//header-row-class-name表头行的 className 的回调方法,也可以使用字符串为所有表头行设置一个固定的 className。Function({row, rowIndex})/String//header-row-style表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。Function({row, rowIndex})/Object//header-cell-class-name表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 className。Function({row, column, rowIndex, columnIndex})/String//header-cell-style表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。Function({row, column, rowIndex, columnIndex})/Object//

     

     

     

    下面给表格添加一个黑色背景,白色文字的暗黑效果

    为 el-table 添加 cell-style 和 header-cell-style 属性,并传入函数,由于表头和表数据的样式都一样,因此传入了相同函数。 

    <el-table :cell-style="cellStyle" :header-cell-style="cellStyle">

    以下是函数体 

    cellStyle() { return { background: "#000000", color: "#ffffff", }; },

     

     

     

    Processed: 0.009, SQL: 8