el-table的一些实操用法

参考了Element Plus文档和其他博主的方法后亲测：

一、el-table改变背景颜色、取消边框、改变字体颜色

1. --el--table--style(推荐，可以透明)

css：

.el-table {
    --el-table-border-color: transparent;
    --el-table-border: none;
    --el-table-text-color: white;
    --el-table-header-text-color: white;
    --el-table-row-hover-bg-color: transparent;
    --el-table-current-row-bg-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-bg-color: transparent;
    --el-table-tr-bg-color: transparent;
    --el-table-expanded-cell-bg-color: transparent;
    @media (prefers-color-scheme: light) {
    --el-table-text-color: #213547;
    --el-table-header-text-color: #213547;
  }
}

不需要定义class:"el-table"，css选择器可以自动识别".el-table"；

2. :row-style（推荐，简洁,但不能透明）

html：

<el-table :row-style="tablestyle" :header-cell-style=tablestyle :cell-style="tablestyle">  

javascript：

const tablestyle = {
"background-color": "red",
"border": "none",
"color": "white",
};

此方案，缺陷是不能使用transparent设置背景色为透明;

其他方案：

">>>"深度穿透试了，没有成功；
"!important"关键字也试过了，也没有成功；
大家可以尝试尝试。

二、el-table合并行或列

Vue代码：

<script setup>
const tableMethod=({row, column, rowIndex, columnIndex})=>{
//rowIndex是行的索引号，从0开始
//columnIndex是列的索引号，从0开始
//row,column表示当前行和当前列
//通过行和列的索引来描述合并逻辑，然后返回值
return [1,1];
//返回值是一个拥有两个元素的数组，第一个值为从自身往右数的合并行数，第二个值为从自身往下数的合并列数
//[1,1]表示不更改，[0,0]表示消除符合条件的区块，[2,1]表示合并这个区块和右边的区块，[1,2]表示合并这个区块和下边的区块
}
</script>
<template>
  <el-table :span-method="tableMethod">
    <el-table-column></el-table-column>
  </el-table>
</template>

步骤：

1. 在<el-table>标签中绑定合并方法；
2. 在js中定义合并方法，合并方法含有一个对象参数，然后使用rowIndex（行索引）和columnIndex（列索引）来写逻辑，并返回相应的合并逻辑数组；
3. 需要注意的是合并的时候不仅要合并需要的行和列，还需要消除被合并的行和列，否则会造成显示错乱，从这个逻辑看，其实这个函数并不是合并，而是加宽了，在加宽目标单元格的同时，消除被合并的单元格。

三、el-table的其他样式设计

1. 各个列<el-table-column>的宽度

使用内联的width只接受px单位的值，要想响应式的设计可以使用min-width，可以接受百分比的值，需要所有的列都使用min-width才能正常生效。