正文

1. 源码

  1. <template>
  2.   <el-table
  3.     :data="tableData"
  4.     style="width: 100%"
  5.   <template>
  6.     <el-table :data="tableData" style="width: 100%" :header-cell-class-name='handleHeadAddClass' @sort-change='tableSortChange'>
  7.       <el-table-column prop="date" label="日期" sortable width="180">
  8.       </el-table-column>
  9.       <el-table-column prop="name" label="姓名" sortable width="180">
  10.       </el-table-column>
  11.       <el-table-column prop="address" label="地址">
  12.       </el-table-column>
  13.     </el-table>
  14.   </template>
  15.   :header-cell-style="headerCellStyle">
  16.     <el-table-column
  17.       prop="date"
  18.       label="各省"
  19.       width="150">
  20.     </el-table-column>
  21.     <el-table-column label="宽带">
  22.       <el-table-column
  23.         prop="name"
  24.         label="姓名"
  25.         width="120">
  26.       </el-table-column>
  27.       <el-table-column label="移动">
  28.         <el-table-column
  29.           prop="province"
  30.           label="省份"
  31.           width="120">
  32.         </el-table-column>
  33.         <el-table-column
  34.           prop="city"
  35.           label="市区"
  36.           width="120">
  37.         </el-table-column>
  38.         <el-table-column
  39.           prop="address"
  40.           label="地址"
  41.           width="300">
  42.         </el-table-column>
  43.         <el-table-column
  44.           prop="zip"
  45.           label="邮编"
  46.           width="120">
  47.         </el-table-column>
  48.       </el-table-column>
  49.     </el-table-column>
  50.   </el-table>
  51. </template>
  53. <script>
  54. export default {
  55.   data() {
  56.     return {
  57.       tableData: [
  58.         {
  59.           date: "2016-05-03",
  60.           name: "王小虎",
  61.           province: "上海",
  62.           city: "普陀区",
  63.           address: "上海市普陀区金沙江路 1518 弄",
  64.           zip: 200333
  65.         },
  66.         {
  67.           date: "2016-05-02",
  68.           name: "王小虎",
  69.           province: "上海",
  70.           city: "普陀区",
  71.           address: "上海市普陀区金沙江路 1518 弄",
  72.           zip: 200333
  73.         },
  74.         {
  75.           date: "2016-05-04",
  76.           name: "王小虎",
  77.           province: "上海",
  78.           city: "普陀区",
  79.           address: "上海市普陀区金沙江路 1518 弄",
  80.           zip: 200333
  81.         },
  82.         {
  83.           date: "2016-05-01",
  84.           name: "王小虎",
  85.           province: "上海",
  86.           city: "普陀区",
  87.           address: "上海市普陀区金沙江路 1518 弄",
  88.           zip: 200333
  89.         },
  90.         {
  91.           date: "2016-05-08",
  92.           name: "王小虎",
  93.           province: "上海",
  94.           city: "普陀区",
  95.           address: "上海市普陀区金沙江路 1518 弄",
  96.           zip: 200333
  97.         },
  98.         {
  99.           date: "2016-05-06",
  100.           name: "王小虎",
  101.           province: "上海",
  102.           city: "普陀区",
  103.           address: "上海市普陀区金沙江路 1518 弄",
  104.           zip: 200333
  105.         },
  106.         {
  107.           date: "2016-05-07",
  108.           name: "王小虎",
  109.           province: "上海",
  110.           city: "普陀区",
  111.           address: "上海市普陀区金沙江路 1518 弄",
  112.           zip: 200333
  113.         }
  114.       ]
  115.     };
  116.   },
  117.   methods: {
  118.     /**
  119.      * 自定义表头列表中某个单元格的样式
  120.      */
  121.     headerCellStyle({ column }) {
  122.       const whitelist = ['各省', '宽带', '移动', '5G']
  123.       if (!whitelist.includes(column.label)) {
  124.         return {
  125.           backgroundColor: 'red',
  126.           color: '#333'
  127.         }
  128.       } else {
  129.         return {}
  130.       }
  131.     }
  132.   }
  133. }
  134. </script>

在线地址

codepen 在线示例：element table 表头某个单元格样式自定义