element-plus 表格-自定义样式实现2

<template>
  <h2>表格修改样式利用属性修改</h2>
  <h3>row-style 行样式</h3>
  <h3>row-style header-row-style 不能改背景色</h3>
  <h3>cell-style header-cell-style能改背景色</h3>

  <el-table
    ref="tableRef"
    :data="tableData"
    border
    style="width: 100%"
    highlight-current-row
    height="200"
    :row-style="rowState"
    :cell-style="cellState"
    :header-row-style="headerRowState"
    :header-cell-style="headerCellState"
  >
    <el-table-column type="index" label="序号" width="100" />
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>

  <div>测试2================</div>
  <h3>header-row-class-name 不能改背景色</h3>
  <h3>header-cell-class-name能改背景色</h3>

  <el-table
    :data="tableData"
    border
    style="width: 100%"
    highlight-current-row
    height="200"
    header-row-class-name="myHeaderClass"
    header-cell-class-name="myHeaderCellClass"
    row-class-name="myRowClass"
    cell-class-name="myCellClass"
  >
    <el-table-column type="index" label="序号" width="100" />
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup >
import { getCurrentInstance, onMounted, reactive, ref, inject } from "vue";

const install = getCurrentInstance();
const tableRef = ref();
const tableData = reactive<any>([]);

const allDableData = reactive<any>([]);

const pageSize4 = ref(10);
const currentPage4 = ref(1);

onMounted(() => {
  for (let i = 0; i < 100; i++) {
    let obj = {
      date: "2016-05-01",
      name: "Tom" + i,
      address: "No. 189, Grove St, Los Angeles",
      color_index: i,
    };
    allDableData.push(obj);
  }

  tableData.push(...allDableData.slice(currentPage4.value - 1, pageSize4.value));
});

function rowState({ row }) {
  let style = {};
  //console.log(row.color_index)
  switch (row.color_index % 4) {
    case 0:
      style = {
        backgroundColor: "red",
        color: "white",
      };
      break;
    case 1:
      style = {
        backgroundColor: "blue",
      };
      break;
    case 2:
      style = {
        backgroundColor: "purple",
      };
      break;
  }

  return style;
}

function cellState(row) {
  // row, column, rowIndex, columnIndex
  //console.log(row.rowIndex,row.columnIndex)
  let style = { backgroundColor: "rgb(16, 95, 95)", color: "blueviolet" };
  if (row.columnIndex == 1) {
    return style;
  }
}

function headerRowState(item) {
  //  row, column, rowIndex, columnIndex
  //console.log("不能改背景，需要利用header-cell-style")
  return { backgroundColor: "rgb(160, 950, 950)", color: "blueviolet" };
}

function headerCellState(item) {
  return { backgroundColor: "rgb(160, 950, 950)", color: "blueviolet" };
}
</script> 


<style >
.myHeaderClass {
  background-color: rgb(16, 95, 95) !important;
  color: blueviolet;
}
.myHeaderCellClass {
  background-color: rgb(16, 95, 95) !important;
}

.myRowClass {
  background-color: rgb(16, 95, 95);
  color: rgb(203, 184, 221);
}
.myCellClass {
  background-color: rgb(16, 95, 95);
}

/* 表格整体背景色 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  /* background-color: transparent !important;
   */
  background-color: rgb(16, 95, 95);
}

/* 表格内tr背景色修改 */
::v-deep .el-table tr {
  background-color: rgb(16, 95, 95) !important;
  border: 0;
  /* 设置字体大小 */
  font-size: 14px;
}

/*表格内td背景色修改*/
::v-deep .el-table td {
  background-color: rgb(16, 95, 95) !important;
  border: 0;
  /* 设置字体大小 */
  font-size: 14px;
}

::v-deep .current-row {
  /* 选中时的图片显示 */
  background: rgb(16, 95, 95);
  background-size: 100% 100% !important;
}

/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgb(66, 11, 11) !important;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}
</style>