<template>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
  
      
      <el-table
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      :data=
      
      "tableData"
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      :row-style=
      
      "tableRowStyle"
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      :header-cell-style=
      
      "tableHeaderColor">
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      <el-table-column
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      property=
      
      "name"
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      label=
      
      "姓名"
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      width=
      
      "120">
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      </el-table-column>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      <el-table-column
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      property=
      
      "age"
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      label=
      
      "年龄"
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      width=
      
      "120">
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      </el-table-column>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      <el-table-column
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      property=
      
      "sex"
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      label=
      
      "性别"
     
     
    
    

    
    

     
     

    
    
    
    

     
     
      
      
      width=
      
      "120">
     
     
    
    

    
    

     
     

    
    
    
    

     
     
    
      
      </el-table-column>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
  
      
      </el-table>
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </template>
     
     
    
    
  
  

 
 

   
   

    
    

   
   
   
   

    
    

     
     <script>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     export 
     
     default {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     name: 
     
     'table',
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       data() {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     return {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     tableData: [
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     name: 
     
     'Cindy',
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     age: 
     
     20,
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     sex: 
     
     '女'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             },
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     name: 
     
     'Mila',
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     age: 
     
     22,
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     sex: 
     
     '女'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             },
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     name: 
     
     'Bob',
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     age: 
     
     23,
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     sex: 
     
     '男'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           ]
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       },
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       created() {},
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     methods: {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     // 修改table tr行的背景色
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         tableRowStyle({ row, rowIndex }) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     return 
     
     'background-color: pink'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         },
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     // 修改table header的背景色
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         tableHeaderColor({ row, column, rowIndex, columnIndex }) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     if (rowIndex === 
     
     0) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     return 
     
     'background-color: lightblue;color: #fff;font-weight: 500;'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <
     
     /script>
    
    
   
   
 
 

效果如下图：