<template>
<Table :columns="columns" :data="tableDate" border :span-method="handleSpan"></Table>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: 'Date',
key: 'date'
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
dataMock: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'John Brown',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
],
tableDate: []
}
},
methods: {
handleSpan ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1) {
//计算合并的行数列数
let x = row.mergeCol == 0 ? 0 : row.mergeCol
let y = row.mergeCol == 0 ? 0 : 1
return [x, y]
}
},
// 排序将相同的放到一起
rowSort (data) {
let newArrys = []
let tmpArr = []
//筛选出不重复的name值,将其放到 names数组中
data.forEach(e => {
if (!tmpArr.includes(e.name)) {
tmpArr.push(e.name)
}
})
for (let i = 0; i < tmpArr.length; i++) {
data.forEach(el => {
if (el.name === tmpArr[i]) {
newArrys.push(el)
}
})
}
return newArrys
},
assembleData (arr) {
// 将相同的放到一起
let data = this.rowSort(arr)
let names = []
//筛选出不重复的name值,将其放到 names数组中
data.forEach(e => {
if (!names.includes(e.name)) {
names.push(e.name)
}
})
let nameNums = []
//将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
names.forEach(e => {
nameNums.push({ name: e, num: 0 })
})
//计算每种 name值所在行需要合并的单元格数
data.forEach(e => {
nameNums.forEach(n => {
if (e.name == n.name) {
n.num++
}
})
})
//将计算后的合并单元格数整合到 data中
data.forEach(e => {
nameNums.forEach(n => {
if (e.name == n.name) {
if (names.includes(e.name)) {
e.mergeCol = n.num
//删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
names.splice(names.indexOf(n.name), 1)
} else {
//被合并的单元格设置为 0
e.mergeCol = 0
}
}
})
})
return data
}
},
mounted () {
this.tableDate = this.assembleData(this.dataMock)
}
}
</script>
iview的table组件合并行单元格
最新推荐文章于 2024-05-16 09:15:36 发布