主要是合并行的处理
emmm 写完这个的感受就是应该静下来多花一点时间去看看可以参考的代码，可以自己先写个demo试试，再放到项目中去
说一下思路吧，element table 有一个属性:span-method 可以设置单元格合并，通过给table传入span-method方法可以实现合并行或列。
方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。
该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
因为:span-method的函数会自动遍历每一个单元格的数据，
这里可以打印一下函数的参数
我们需要对一维数组进行相同项处理，把每一行需要合并的数据放在一个数组里形式例如[3,0,0,2,0]，这个数据形式代表第一行合并3行，第二行被合并，第三行被合并，第四行合并2行...
有段代码参考了资料，发现有不太好的地方，因为在span-method回调函数里有频繁调用一个处理函数，其实只要调用一次，处理成需要的数据就可以了，所以改了一下
//现在要处理的就是获取到的格式
// 假如有这样一组数据
data(){
return {
data:[
{ adCost: 0,
channelName: "fb_campagin_1",
chargeRevenue: null,
country: "美国",
createRoleNum: 0,
time: "2019-04-26"
},
{ adCost: 1,
channelName: "fb_campagin_1",
chargeRevenue: null,
country: "美国",
createRoleNum: 1,
time: "2019-04-26"
},
{ adCost: 3,
channelName: "fb_campagin_1",
chargeRevenue: null,
country: "美国",
createRoleNum: 3,
time: "2019-04-26"
},
{
adCost: 3,
channelName: "fb_campagin_1",
chargeRevenue: null,
country: "韩国",
createRoleNum: 3,
time: "2019-04-26"
},
{ country: "韩国",
adCost: 3,
channelName: "fb_campagin_1",
chargeRevenue: null,
createRoleNum: 3,
time: "2019-04-26"
}
]
}
}
method(){
init(){
//在某一个函数里初始化，
this.setTable(this.data,'country') //这里会return一个对象 {'country': [3,0,0,2,0]} 之所以是对像是因为可能有多列需要合并行，便于区分
}
/**
*data 一维数组的数据
*c 列名
*/
setTable(data, c) {
let spanOneArr = []
let concatOne = 0
data.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1)
} else {
if (item[c] && item[c] === data[index - 1][c]) { //当前项和前一项比较
spanOneArr[concatOne] += 1 //相同值第一个出现的位置，统计需要合并多少行
spanOneArr.push(0)//新增一个被合并行
} else {
spanOneArr.push(1) //否则不合并
concatOne = index//指向位移
}
}
})
var obj = {}
obj[c] = spanOneArr
this.arr.push(obj)
}
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.arr[0].country[rowIndex] //因为rowIndex出现会从1到结尾
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
}
如果获取到的数据是一个嵌套的数据，则需要把嵌套的数据整理成一维数组形式的，这样会符合table的数据格式要求，如果后端能直接返回一维数组就更好啦，但是前端也可以自己整理
例如 我项目中的数据
{
美国: {
'2019-04-2':[
{
adCost: 0
channelName: "fb_campagin_3"
chargeRevenue: null
createRoleNum: 0
},
{
adCost: 0
channelName: "fb_campagin_3"
chargeRevenue: null
createRoleNum: 0
}
],
'2019-04-3':[
{
adCost: 0
channelName: "fb_campagin_3"
chargeRevenue: null
createRoleNum: 0
},
{
adCost: 0
channelName: "fb_campagin_3"
chargeRevenue: null
createRoleNum: 0
}
],
},
中国: {
'2019-04-2':[
{
adCost: 0
channelName: "fb_campagin_3"
chargeRevenue: null
createRoleNum: 0
},
{
adCost: 0
channelName: "fb_campagin_3"
chargeRevenue: null
createRoleNum: 0
}
],
'2019-04-3':[
{
adCost: 0
channelName: "fb_campagin_3"
chargeRevenue: null
createRoleNum: 0
},
{
adCost: 0
channelName: "fb_campagin_3"
chargeRevenue: null
createRoleNum: 0
}
],
}
}
//下面有对null判断是因为我的数据中有可能会出现null
function transfData(data) {
var result = []
for (let key in data) {
var tmp = {}
if (key !== 'null') {
tmp = Object.assign(tmp, {
country: key
})
}
for (let key2 in data[key]) {
if (key2 !== 'null') {
tmp = Object.assign(tmp, {
time: key2
})
}
for (let key3 in data[key][key2]) {
let tmpN = {}
tmpN = Object.assign(tmpN, data[key][key2][key3], tmp)
result.push(tmpN)
}
}
}
return result
}
最后的效果
2019-04-25_182902.png
网友评论