el-table修改表头、列的背景颜色、字体样式

最新推荐文章于 2024-04-24 09:40:33 发布

原创最新推荐文章于 2024-04-24 09:40:33 发布 · 1.8w 阅读

37 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何在使用Vue和Element UI构建的表格中，通过JavaScript实现根据姓名列数据动态设置单元格背景颜色，并设置了表头特定列的背景和字体样式。

设置列的背景颜色

html

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<div id="app">
<template>
    <el-table :data="tableData" 
    			:cell-style="cellStyle" 
    			border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </template>
</div>

var Main = {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 1518 弄'
          },{
            date: '2016-05-02',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎2',
            address: '上海市普陀区金沙江路 1517 弄'
          },{
            date: '2016-05-02',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 1522 弄'
          }]
        }
      },
      methods: {
      	cellStyle({row, column, rowIndex, columnIndex}){
        	if(column.property === 'name'){
          	switch(row.name) {
            	case '王小虎1':
              	return {
                	background: 'red',
                  color: '#FFFFFF'
                }
              	break
              case '王小虎2':
              	return {
                	background: 'blue',
                  color: '#FFFFFF'
                }
              	break
            }
          }
        }
      }
    }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

效果

在这里插入图片描述

设置表头背景颜色，字体

html

    <el-table
      border
      fit
      highlight-current-row
      style="width: 100%;"
      stripe
      :header-cell-style="rowClass"
    >
      <!-- 表格列 -->
      <el-table-column
        prop="name"
        label="地区"
        min-width="90"
        align="center"
      />
      <el-table-column
        prop="name"
        label="厂站"
        min-width="90"
        align="center"
      />
      <el-table-column
        prop="name"
        label="psdb名称"
        min-width="90"
        align="center"
      />
      <el-table-column
        prop="name"
        label="参数类型"
        min-width="90"
        align="center"
      />
      <el-table-column
        prop="name"
        label="psdb值"
        min-width="90"
        align="center"
      />
      <el-table-column
        prop="name"
        label="cime值"
        min-width="90"
        align="center"
      />
      <el-table-column
        prop="name"
        label="差异比例"
        min-width="90"
        align="center"
      />
      <el-table-column
        prop="name"
        label="修改建议"
        min-width="90"
        style="color:green"
        align="center"
      />
      <el-table-column
        prop="name"
        label="PSDB修改值"
        min-width="90"
        align="center"
      />
      <el-table-column
        prop="name"
        label="CIME修改值"
        min-width="90"
        align="center"
      />
    </el-table>

    rowClass({ rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        if(columnIndex===7||columnIndex===8||columnIndex===9){
          return {background:'skyblue',color:'white'}
        }else{
          return {background:'#ededed'}
        }
      }
    },

效果图
在这里插入图片描述