先看效果图:
根据某项属性确定高亮哪一列或几列的单元格。
根据异常类型列的数据决定高亮某一列的背景颜色及字体样式
根据elemenUI中 table组件的可修改属性来配置 cell-style

     <el-table
       ref="multipleTable"
       :data="tableData"
       v-loading="loading"
       :cell-style="abnormal_columnStyle"
       :header-cell-style="{'padding':'0 5px', 'text-align': 'center' }"
       tooltip-effect="dark"
       style="width: 100%"
     >
       <el-table-column prop="abnormal_type" label="异常类型" min-width="120">
         <template slot-scope="scope">
           <span :style="abnormal_typeText(scope.row.abnormal_type).style"></span>
               {{ abnormal_typeText(scope.row.abnormal_type).text }}
       
         </template>
       </el-table-column>
       <el-table-column prop="check_count" label="次数" min-width="60">
       </el-table-column>
         <el-table-column prop="region" label="省份" width="">
         </el-table-column>
         <el-table-column prop="city" label="城市" width="">
         </el-table-column>
         <el-table-column prop="nickname" label="用户" width="">
         </el-table-column>
     </el-table>

把回调的函数写在computed,利用缓存


    abnormal_columnStyle() {
      return function(row, column, rowIndex, columnIndex) {
        const style = {
          times: {
            'backgroundColor':'#ff5b5b','text-align':'center','font-weight':'bold','color':'#fff'},
          person: {'backgroundColor':'#db639b','text-align':'center','font-weight':'bold','color':'#fff'},
          area: {'backgroundColor':'#ea9b17','text-align':'center','font-weight':'bold','color':'#fff'},
          all: {'text-align':'center',},
        }
        if (row.column.property == 'nickname') {
          if (row.row.abnormal_type == 'person') {
            return style[row.row.abnormal_type]
          }else{
            return style['all']
          }
        } else if (row.column.property == 'region'||row.column.property == 'city') {
          if (row.row.abnormal_type == 'area') {
            return style[row.row.abnormal_type]
          }else{
            return style['all']
          }
        }else if (row.column.property == 'check_count') {
          if (row.row.abnormal_type == 'times') {
            return style[row.row.abnormal_type]
          }else{
            return style['all']
          }
        }else{
          return style['all']
        }
      }
    },
Logo

前往低代码交流专区

更多推荐