秦皇岛的网站建设公司幽默软文经典案例300

本文主要介绍了element中el-table表头通过header-row-style设置样式

一、header-row-style官网说明

有些时候需要给element-ui表头设置不同样式，比如居中、背景色、字体大小等等，这时就可以用到本文要说的属性header-row-style。官网说明如下所示：

二、设置全部表头

以下代码全都借助element-ui官网的在线运行调试。可以按下图找到一个在线运行，然后修改代码。

2.1、方式一

<el-table :header-cell-style="{'text-align': 'center'}" />

效果图：

如上图，标题居中对齐

2.2、方式二

<template><el-table :header-cell-style="tableHeaderStyle" />
</template>
<script>
export default {methods: {tableHeaderStyle ({row, column, rowIndex, columnIndex}) {return 'text-align: center;'}}
}
</script>

三、设置某个表头

<template><el-table :header-cell-style="tableHeaderStyle" />
</template>
<script>
export default {methods: {// 设置表头的颜色tableHeaderStyle({ row, column, rowIndex, columnIndex }) {if (rowIndex === 0 && columnIndex === 0) {return 'background-color: #afccfd; color:#000000;'; //蓝色} else if (rowIndex === 0 && columnIndex === 1) {return 'background-color: #c0e33c; color:#000000;';//绿色} else if (rowIndex === 0 && columnIndex === 2) {return 'background-color: #fbc57b; color:#000000;';//橙色} else {return 'color:#000000; background: #ffffff;';}}}
}
</script>

效果图如下：

关于el-table修改颜色更多文章可以参考另一篇博文《vue修改el-table表格标题颜色、vue修改列颜色、el-table修改列颜色》