el-table tree 改变某一个单元格背景色

树状结构改变某个单元格颜色,根据层级判断是否展示数据

<el-table :data="tableData" style="width: 100%;" :row-key="tableRowKey" border :highlight-current-row="true" :cell-style="tableCellStyle" :tree-props="treeProps" v-on:row-click="rowClick" v-loading="loading" height="100%"> 
                <el-table-column type="index" label="#" width="50" align="center"></el-table-column>
                <el-table-column prop="InspectionNodeName" label="环节名称">
                    <template slot-scope="scope">
                        {{dataRender(scope.row,['InspectionNodeName'], 'InspectionNodeName')}}
                    </template> 
                </el-table-column>
                <el-table-column prop="FileName" label="文件名称">
                    <template slot-scope="scope">
                        <el-link v-on:click="handleClick(scope.row)" type="primary">{{dataRender(scope.row,['FileRecordInfo', 'FileName'])}}</el-link>
                    </template> 
                </el-table-column>
                <el-table-column label="状态" width="200">
                    <template slot-scope="scope">
                        {{dataRender(scope.row,['Status','Name'])}}
                    </template>
                </el-table-column>
                <el-table-column label="检验人" width="200">
                    <template slot-scope="scope">
                        {{dataRender(scope.row,['Creator','Name'])}}
                    </template>
                </el-table-column>
                <el-table-column label="检验时间" width="150">
                    <template slot-scope="scope">{{dataRender(scope.row,['CreateTime'], 'Date')}}</template>
                </el-table-column>
            </el-table>


tableRowKey:function(row) {
    return row.Id + row.CreateTime + row.CreateDate + row.InspectionNodeName + row.BusinessTemplateTypeName + row.FileName
},

// 改变某一行单元格背景颜色
tableCellStyle({ row, column, rowIndex,  columnIndex}) {
    let rowBackground = {};
    if (this.isAnd) {
        if (row.FileRecordId) {
            if (columnIndex>1) {
                if (row.Status) {
                    if (row.Status.Value==0||row.Status.Value==1) {
                        rowBackground.background = '#CAF982'
                    }
                    if (row.Status.Value>1) {
                        rowBackground.background = '#173F00'
                    }
                }
            }
        }
        if (!row.FileRecordId) {
            if (columnIndex == 1) {
                if (row.Status) {
                    if (row.Status.Value==0||row.Status.Value==1) {
                        rowBackground.background = '#CAF982'
                    }
                    if (row.Status.Value>1) {
                        rowBackground.background = '#173F00'
                    }
                 }
             }
         }
      }
      return rowBackground
},

//重绘列表框
dataRender:function(data, fieldList, type){
    var value = '';
    // 判断哪些单元格展示数据,哪些不展示数据
    if(utils.isEmpty(data.BusinessTemplateTypeName)){
        if(type == "InspectionNodeName"){
            value = utils.dataRender(data, fieldList)
        }
     } else {
         if(type !== "InspectionNodeName"){
             value = utils.dataRender(data, fieldList);
         }
         if(type == "Date"){
             value = utils.DateFormat(value);
         }                        
     }
     return value;
}

 实现效果

 

 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值