elementUI表头和数据从数据库获取并加过滤器与样式变化

 

<el-table
  :data="dataList"
  :height=tableHeight1
  size="small "
  border
  style="width: 100%"
  >
  <el-table-column
    v-for="(headerData,index) in dataHeadList"
    :key="`headerData-${index}`"
    :label="headerData.label"
    width="150"
    align="center"
    >
    <template slot-scope="scope">
      <span :class="scope.row[headerData.port] | formatStatu">{{scope.row[headerData.port] | formatStatus}}</span>
    </template>
  </el-table-column>
</el-table>

data() {
  return {
    dataList: [], //表格数据
    dataHeadList:[] //表头
  }
}

 此图是从后台获取的数据结构：

// 过滤器
filters: {
  formatStatus(val){
    /* 验证两位正整数 这里是我自己的筛选条件*/
    var reg =/^\d{2}$/    
    if(reg.test(val)){
      if(val==10){
        return '未检'
      }else if(val==20){
        return '已检'
      }else if(val==30){
        return '弃检'
      }
    }else {
      return val
    }
  },
  formatStatu(val){
    /* 验证两位正整数 这里是我自己的筛选条件*/
    var reg =/^\d{2}$/
    if(reg.test(val)){
      if(val==10){
        return 'textOrg'
      }else if(val==20){
        return ''
      }else if(val==30){
        return 'textRed'
      }
    }else {
      return false
    }
  }
},

<style scoped>
  /*弃检*/
  .textRed{
    color: red;
  }
  /*未检*/
  .textOrg{
    color: #f90;
  }
</style>