自定义element-ui table内容

本文参考：https://blog.csdn.net/qq_32610671/article/details/90731672

cell-style自定义单元格字体样式

image.png

methods: {
      cellStyle(row,column,rowIndex,columnIndex){//根据报警级别显示颜色
        // console.log(row);
        // console.log(row.column);
        if(row.column.label==="告警级别"&& row.row.alarmLevel==="紧急告警"){
          return 'color:red'
        }else if(row.column.label==="告警级别"&& row.row.alarmLevel==="一般告警" ){
          return 'color:yellow'
        }
      }
    }

render-header自定义表头

renderHeaderDate(){
        return (

          
          日期
          
)
      },

效果

image.png

formatter 表格内容格式化

typeFormatter: function(row, column) {
      switch (row.effect_type) {
        case "0":
          return "当天有效";
          break;
        case "1":
          return "当月有效";
          break;
        case "2":
          return "季度有效";
          break;
      }
}

slot自定义列模板

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。

效果

image.png

v-for循环渲染表格内容

      colunmName: ['澳中线-悉尼-仓库', '澳中线-悉尼-仓库1'],
      totalNumber: 100,
      data: [{
        list: [
          {
            name: '澳中线-悉尼-仓库1',
            value: 1
          },
          {
            name: '澳中线-悉尼-仓库1',
            value: 1
          }
        ],
        userName: 'admin'
      }, {
        list: [
          {
            name: '澳中线-悉尼-仓库1',
            value: 1
          },
          {
            name: '澳中线-悉尼-仓库1',
            value: 1
          }
        ],
        userName: 'jason'
      }]

以上是数据，下面遍历数据

多级表头

image.png

只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

 tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]