el-table 带状态的表格

1: 可以将表格内容highlight 显示,  方便区分 [成功, 信息, 警告, 危险] 等内容。

   可以通过指定Table 组件的row-class-name 属性来为 Table 中某一行添加class 属性, 表明该行处于某种状态。

2:  <template>
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        >
         <el-table-column
           prop="date"
           label="日期"
           width="180"
           >
         </el-table-column>
      </el-table>
    </template>

 <style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  methods: {
    tableRowClassName({row, rowIndex}) {
      if(rowIndex === 1) {
        return "warning-row"
      }else if(rowIndex === 3) {
        return "success-row"
      }
      return "";   // 返回值为空
    }
  }
</script>

// 当纵向内容过多时:  可以设置表头固定高度。    只需要在el-table 中定义height 属性, 即可实现固定表头的表格, 而不需要额外的代码。

// 多级表头的构建  数据结构比较复杂的时候,  可以使用多级表头来展示数据的层次。
只需要在el-table-column 里边嵌套的el-table-column,   就可以实现多级表头。