【vue】ElementUI el-table获取单元格的值&间隔行显示颜色&多级表头&合并行&表头固定

ElementUI笔记

2022/4/26 周二

前端新手入门，如有错误，欢迎在评论区指出，非常感谢！

---

1. 获取单元格的值

比如说我要先获取单元格内的值，如果是“合计”行的话就设置不同的样式，可以给el-table元素添加一个 :cell-style=“cellStyle” 的方法，该方法可以带4个参数row, column, rowIndex, columnIndex，用 row[column.property] 就能获取当前单元格的值：

cellStyle({
   row, column, rowIndex, columnIndex,
}) {
    // 获取最后一行合计行的行号，赋值给全局变量sumRowIndex，这样遍历到这一行后面的单元格也都能拿到这个行号
    if (row[column.property] == "合计") {
   	    sumRowIndex = rowIndex
    };
	// 合计行显示颜色
	if(rowIndex == sumRowIndex) {
        return { backgroundColor: '#c1deb7'}; 
	};
  },

效果：

2. 表格间隔行显示颜色

在cellStyle方法里给行号为偶数的单元格设置背景颜色就行了

if (rowIndex % 2 !== 0) {
	def = {backgroundColor: '#e4e7ed'}; 
};

这个间隔行的深色和之前合计行的颜色要显示哪个，取决于哪个代码后运行（样式覆盖）。

3. 多级表头（表头合并行、合并列）

通过el-table-column标签的 嵌套 实现：

<el-table :row-key="bandRowKeys" :data="tableData" class="table" :fit="false" border :header-row-style="headerRowStyle" :header-cell-style="tableHeadCellStyle" :cell-style="cellStyle">
  <el-table-column width="64" prop="XCOMDESC" label="合并行">
  </el-table-column>
  <el-table-column label="合并列">
    <el-table-column width="66" prop="TOTAL_POLICY_QTY" label="列1">
    </el-table-column>
    <el-table-column width="66" prop="DONE_POLICY_QTY" label="列2">
    </el-table-column>
    <el-table-column width="64" prop="POLICY_QTY_RATE" label="列3">
    </el-table-column>
    <el-table-column width="68" prop="POLICY_QTY_INC" label="列4">
    </el-table-column>
  </el-table-column>
</el-table>

效果：

4. 表格合并行

我需要表格首列里值相同的单元格合并，可以给el-table标签定义一个 :span-method=“arraySpanMethod” 方法，其中COLUMNNAME是这一列的列名（对应prop=“COLUMNNAME”），按需要修改：

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
        if(rowIndex ===0 || row.COLUMNNAME != this.tableData[rowIndex-1].COLUMNNAME){
            let rowspan = 0;
            this.tableData.forEach(element => {
                if(element.COLUMNNAME === row.COLUMNNAME){
                    rowspan ++;
                }
            });
            return [rowspan, 1];
        }else {
            return [0, 0];
        }
    }
}

效果：

5. 表头固定显示，不随滚动条而被滑上去

只要在el-table元素中定义 height 属性，就可固定表头

<el-table :data="tableData" height="480">
</el-table>