需求是 每个任务的版本不同,版本号也不同。根据版本去判断每个任务,都有的版本就不标红,只要有一个没有就标红。根据不同的版本去合并单元格。
一:合并单元格
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!!完成!!!