需求:计算两数之差,并且在表格中显示,当差大于0,则当前的背景色或字体颜色为绿色,小于0则 显示其他颜色,等于0则正常显示
- <el-table v-loading="loading" :data="list" highlight-current-row stripe border
- :header-cell-style="labelStyle" :cell-style="changeBg" height="580px">
- <el-table-column prop="country" width="100" align="center">el-table-column>
- <el-table-column width="100" align="center">
- <template slot-scope="{ row }">
- {{ row.num1- row.num2}}
- template>
- el-table-column>
- <el-table-column prop="num1" label="数据1" min-width="100" align="center">el-table-column>
- <el-table-column prop="num2" label="数据2" min-width="100"
- align="center">el-table-column>
- el-table>
- /* data 部分 */
- data() {
- return {
- labelStyle: { //修改table 头部header样式
- fontSize: '24px',
- fontWeight: 600,
- color: '#585858',
- }
- }
- }
-
- /* methods 函数部分 */
-
- // 改变table字体颜色
- changeBg({ row, column, rowIndex, columnIndex }) {
- const diff = row.patsanp_patent_num - row.heima_patent_num;
- if (diff > 0 && columnIndex === 1) { // columnIndex 代表第几列
- return {
- color: '#45A321',
- fontWeight: 600
- }
- } else if (diff < 0 && columnIndex === 1) {
- return {
- color: '#d11a32',
- fontWeight: 600
- }
- } else if (diff == 0 && columnIndex === 1) {
- return {
- color: '#000',
- }
- }
- else if (columnIndex === 0) {
- // 获取第二列的字体颜色
- const secondColumnColor = this.changeBg({
- row,
- column,
- rowIndex,
- columnIndex: 1
- }).color;
- return {
- color: secondColumnColor,
- fontWeight: 600
- };
- }
- }