iview table表格 单元格合并+变色

需求是  每个任务的版本不同,版本号也不同。根据版本去判断每个任务,都有的版本就不标红,只要有一个没有就标红。根据不同的版本去合并单元格。

一:合并单元格

table中 加入 span-method方法

<Table
        :loading="loading"
        border
        :columns="comparisonColumns"
        :data="comparisonData"
        sortable="custom"
        ref="comparisonTable"
        :span-method="handleSpan"
></Table>

methods:

 //表格合并
            handleSpan({row,column,rowIndex,columnIndex}){
                if(columnIndex == 0) {
                    //计算合并的行数列数
                    let x = row.mergeColumn == 0 ? 0:row.mergeColumn
                    let y = row.mergeColumn == 0 ? 0:1
                    return [x, y]
                }
                if(columnIndex == 1){
                    let x = row.mergeColumn == 0 ? 0:row.mergeColumn
                    let y = row.mergeColumn == 0 ? 0:1
                    return [x, y]
                }
                if(columnIndex == 2){
                    let x = row.mergeColumn == 0 ? 0:row.mergeColumn
                    let y = row.mergeColumn == 0 ? 0:1
                    return [x, y]
                }
                if(columnIndex == 3){
                    let x = row.mergeColumn == 0 ? 0:row.mergeColumn
                    let y = row.mergeColumn == 0 ? 0:1
                    return [x, y]
                }
                if(columnIndex == 4){
                    let x = row.mergeColumn == 0 ? 0:row.mergeColumn
                    let y = row.mergeColumn == 0 ? 0:1
                    return [x, y]
                }
            },

调用的方法—在获取到表格数据后调用,将数据传进去即可

 assembleData(data){
                let names = []
                //筛选出不重复的 name值,将其放到 names数组中
                data.forEach(e => {
                    if(!names.includes(e.sdkname)){
                        names.push(e.sdkname)
                    }
                })
                let nameNums = []
                //将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
                names.forEach(e => {
                    nameNums.push({name:e,num:0})
                })
                //计算每种 name值所在行需要合并的单元格数
                data.forEach(e => {
                    nameNums.forEach(n => {
                        if(e.sdkname == n.name){
                            n.num++
                        }
                    })
                })
                //将计算后的合并单元格数整合到 data中
                data.forEach(e => {
                    nameNums.forEach(n => {
                        if(e.sdkname == n.name){
                            if(names.includes(e.sdkname)){
                                e.mergeColumn = n.num
                                //删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
                                names.splice(names.indexOf(n.name),1)
                            } else {
                                //被合并的单元格设置为 0
                                e.mergeColumn = 0
                            }
                        }
                    })
                })
                //将整理后的数据交给表格渲染
                this.comparisonData = data;
            },

二:指定单元格变色

变色很简单  只需要在你需要变色的一条数据上加上cellClassName对象,对象里面放你要变色的字段以及变色的样式名称。

cellClassName= {
    piname:  params.piname==undefined?'demo-table-info-cell-modelVersion':'',
    credno1:  params.credno1==undefined?'demo-table-info-cell-modelVersion':'',
}

样式直接写道style即可

 .ivu-table .demo-table-info-cell-modelVersion {
        background-color: #F56C6C;
        color:#fff;
    }

难点是   怎么去根据条件添加这个变色的属性 

我是要从一个二维数组  拿取到所有的数据,所以先遍历出来所有的数据

for(){

for(){这里就不多写了。}

}

然后找到数据中每个元素出现的次数:将数组传到这个方法  就可以得到每个元素的出现次数,以对象的方式返回。

   getRepeatNum(arr){
                var obj = {};
                for(var i= 0, l = arr.length; i< l; i++){
                    var item = arr[i];
                    obj[item] = (obj[item] +1 ) || 1;
                }
                return obj;
            },

拿到对象后,对对象进行遍历,就可以拿到这个数据:数据个数;

 let aaa =  this.getRepeatNum(strs);
                               
                                for(let item in aaa){
                                    if( aaa[item] !== name.length){
                                        array.push(item);
                                    }
                                }

根据任务长度 判断 元素长度不等于任务长度的数据,将他们放到数组存着。

 array.forEach(i=> {
            if(i == s.modelVersion){
                    arr5= {
                          feature: 'demo-table-info-cell-modelVersion',
                           modelVersion: 'demo-table-info-cell-modelVersion',
                          }
             }
       })

最后将数据遍历,表格数据等于该元素的数据,加上这个属性;

注意!!!添加属性,是相当于重新对这个属性赋值,所以会造成每个元素只能加一次,如果要一行数据多个标红,记得先将属性放到一个对象中,多个对象之后,将所有对象再添加到cellClassName。

 s.cellClassName={
                                                ...arr,
                                                ...arr1,
                                                ...arr2,
                                                ...arr3,
                                                ...arr4,
                                                ...arr5,
                                                ...arr6,
                                            }

ok!!完成!!!

    原文作者:偷吃月亮的美羊羊
    原文地址: https://blog.csdn.net/qq_44748497/article/details/126529354
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞