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-tableref="tableRef":data="tableData"borderstyle="width: 100%"highlight-current-rowheight="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"borderstyle="width: 100%"highlight-current-rowheight="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>