526互联

更改el-table样式

发布时间 2023-03-31 17:31:29作者: 根号三先生

要更改el-table的样式，您可以使用以下方法：

  1. 通过 CSS 更改样式：您可以使用 CSS 更改表格的样式，例如更改表头、行、单元格等的颜色、字体、背景等属性。可以通过给元素添加类名或使用选择器来选择元素并应用样式。例如： 
    /* 更改表头背景颜色 */
.el-table__header {
  background-color: #f0f0f0;
}

/* 更改表格行鼠标悬停时的背景颜色 */
.el-table__row:hover {
  background-color: #e0e0e0;
}

/* 更改单元格字体颜色 */
.el-table__cell {
  color: #333;
}
  2. 通过table-header-props和table-row-props属性更改样式：您可以通过设置table-header-props和table-row-props属性来更改表头和行的样式。例如： 
    <el-table
  :data="tableData"
  :table-header-props="{ 'background-color': '#f0f0f0' }"
  :table-row-props="{ 'class-name': 'my-row' }"
>
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
</el-table>

    在上面的示例中，将表头的背景颜色更改为灰色，并为所有行添加了一个名为“my-row”的类。

  3. 通过插槽更改样式：el-table组件有多个插槽，包括表头、表尾、行、列等。您可以通过在这些插槽中使用自定义模板来更改表格的样式。例如： 
    <el-table :data="tableData">
  <template slot="header">
    <tr>
      <th style="background-color: #f0f0f0;">Name</th>
      <th style="background-color: #f0f0f0;">Age</th>
    </tr>
  </template>
  <template slot-scope="{ row }" slot="row">
    <tr :class="{'my-row': true}">
      <td>{{ row.name }}</td>
      <td>{{ row.age }}</td>
    </tr>
  </template>
</el-table>

    在上面的示例中，使用自定义表头模板将表头的背景颜色更改为灰色，并使用自定义行模板为所有行添加了一个名为“my-row”的类。

el-table有哪些属性

el-table是 Element UI 框架中的一个组件，它用于呈现表格数据。以下是一些常用的 el-table 属性：

  • data：表格数据，数组类型，数组中的每个元素代表表格的一行数据。

  • columns：表格列的配置，数组类型，每个元素代表一个表格列的配置，包括 prop、label、width、align、sortable、renderHeader 等属性。

  • height：表格的高度，可以是数字或字符串类型，例如 500 或 '500px'。

  • max-height：表格的最大高度，可以是数字或字符串类型。

  • stripe：是否显示斑马线，默认值为 false，设置为 true 后表格会显示斑马线。

  • border：是否显示表格边框，默认值为 false，设置为 true 后表格会显示边框。

  • fit：是否将表格宽度调整为容器宽度，默认值为 true。

  • show-header：是否显示表头，默认值为 true。

  • highlight-current-row：是否高亮当前行，默认值为 false，设置为 true 后表格会高亮当前行。

  • row-class-name：行的类名，可以是字符串或函数类型，可以根据行数据返回不同的类名，例如：

    <el-table :data="tableData" :row-class-name="rowClassName">
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
</el-table>
    function rowClassName(row) {
  if (row.age > 18) {
    return 'adult';
  } else {
    return 'child';
  }
}

    cell-class-name：单元格的类名，可以是字符串或函数类型，可以根据单元格数据返回不同的类名，例如：

    <el-table :data="tableData">
  <el-table-column prop="name" label="Name" :cell-class-name="cellClassName"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
</el-table>
    function cellClassName({ row, column, rowIndex, columnIndex }) {
  if (row.age > 18 && column.prop === 'name') {
    return 'adult-name';
  } else {
    return 'normal';
  }
}

    row-style：行的样式，可以是对象或函数类型，可以根据行数据返回不同的样式，例如：

    <el-table :data="tableData" :row-style="rowStyle">
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
</el-table>
    function rowStyle({ row, rowIndex }) {
  if (rowIndex % 2 === 0) {
    return { background: '#f0f0f0' };