ElementPlus怎么修改表格行和单元格样式

ElementPlus 是一个基于 Vue 3 的 UI 组件库，提供了丰富的组件来帮助开发者快速构建现代化的 Web 应用。其中，el-table 是 ElementPlus 中用于展示表格数据的组件。在实际开发中，我们经常需要根据业务需求自定义表格的行和单元格样式。本文将详细介绍如何使用 ElementPlus 修改表格行和单元格样式。

1. 修改表格行样式

1.1 使用 row-class-name 属性

el-table 组件提供了一个 row-class-name 属性，允许我们为表格的每一行动态添加类名。通过这个类名，我们可以自定义行的样式。

<template>
  <el-table :data="tableData" :row-class-name="tableRowClassName">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-10-01', name: '张三', address: '北京市' },
        { date: '2023-10-02', name: '李四', address: '上海市' },
        { date: '2023-10-03', name: '王五', address: '广州市' }
      ]
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 2) {
        return 'success-row';
      }
      return '';
    }
  }
};
</script>

<style>
.el-table .warning-row {
  background-color: #fdf6ec;
}

.el-table .success-row {
  background-color: #f0f9eb;
}
</style>

在上面的代码中，我们通过 tableRowClassName 方法为第二行和第三行分别添加了 warning-row 和 success-row 类名，然后在样式中为这些类名定义了背景颜色。

1.2 使用 row-style 属性

除了使用类名，我们还可以通过 row-style 属性直接为表格行设置样式。row-style 是一个函数，返回一个对象，对象的键是 CSS 属性，值是对应的样式值。

<template>
  <el-table :data="tableData" :row-style="tableRowStyle">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-10-01', name: '张三', address: '北京市' },
        { date: '2023-10-02', name: '李四', address: '上海市' },
        { date: '2023-10-03', name: '王五', address: '广州市' }
      ]
    };
  },
  methods: {
    tableRowStyle({ row, rowIndex }) {
      if (rowIndex === 1) {
        return { backgroundColor: '#fdf6ec' };
      } else if (rowIndex === 2) {
        return { backgroundColor: '#f0f9eb' };
      }
      return {};
    }
  }
};
</script>

在这个例子中，我们通过 tableRowStyle 方法直接为第二行和第三行设置了背景颜色。

2. 修改表格单元格样式

2.1 使用 cell-class-name 属性

类似于 row-class-name，el-table 组件还提供了 cell-class-name 属性，允许我们为表格的每个单元格动态添加类名。

<template>
  <el-table :data="tableData" :cell-class-name="tableCellClassName">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-10-01', name: '张三', address: '北京市' },
        { date: '2023-10-02', name: '李四', address: '上海市' },
        { date: '2023-10-03', name: '王五', address: '广州市' }
      ]
    };
  },
  methods: {
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return 'warning-cell';
      } else if (columnIndex === 2) {
        return 'success-cell';
      }
      return '';
    }
  }
};
</script>

<style>
.el-table .warning-cell {
  background-color: #fdf6ec;
}

.el-table .success-cell {
  background-color: #f0f9eb;
}
</style>

在这个例子中，我们通过 tableCellClassName 方法为第二列和第三列的单元格分别添加了 warning-cell 和 success-cell 类名，然后在样式中为这些类名定义了背景颜色。

2.2 使用 cell-style 属性

同样地，我们也可以通过 cell-style 属性直接为表格单元格设置样式。

<template>
  <el-table :data="tableData" :cell-style="tableCellStyle">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-10-01', name: '张三', address: '北京市' },
        { date: '2023-10-02', name: '李四', address: '上海市' },
        { date: '2023-10-03', name: '王五', address: '广州市' }
      ]
    };
  },
  methods: {
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return { backgroundColor: '#fdf6ec' };
      } else if (columnIndex === 2) {
        return { backgroundColor: '#f0f9eb' };
      }
      return {};
    }
  }
};
</script>

在这个例子中，我们通过 tableCellStyle 方法直接为第二列和第三列的单元格设置了背景颜色。

3. 总结

通过 row-class-name、row-style、cell-class-name 和 cell-style 属性，我们可以轻松地自定义 ElementPlus 表格的行和单元格样式。这些属性提供了灵活的方式来根据业务需求动态调整表格的外观，从而提升用户体验。

在实际开发中，我们可以根据具体需求选择合适的方式来修改表格样式。无论是通过类名还是直接设置样式，ElementPlus 都为我们提供了强大的工具来实现表格样式的自定义。