ElementPlus怎么修改表格行和單元格樣式

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 都為我們提供了強大的工具來實現表格樣式的自定義。