<template>
<div class="home">
<template>
<el-table :data="tableData" style="width: 100%" :span-method="arraySpanMethod">
<el-table-column v-for="(item,index) in columnList" :prop="item.prop" :label="item.label" align="center">
</el-table-column>
</el-table>
</template>
</div>
</template>
<script>
export default {
name: 'Home',
components: {},
data() {
return {
tableData: [
{ city: '苏州', country: '玄武', gender: '男', name: '1' },
{ city: '南京', country: '江宁', gender: '男', name: '2' },
{ city: '南京', country: '江宁', gender: '女', name: '3' },
{ city: '南京', country: '江宁', gender: '男', name: '4' },
{ city: '南京', country: '鼓楼', gender: '男', name: '5' },
{ city: '南京', country: '鼓楼', gender: '男', name: '6' },
{ city: '南京', country: '秦淮', gender: '男', name: '7' },
{ city: '南京', country: '秦淮', gender: '女', name: '8' },
{ city: '南京', country: '建邺', gender: '男', name: '9' },
{ city: '南京', country: '建邺', gender: '男', name: '0' },
{ city: '盐城', country: '建邺', gender: '男', name: '2' },
{ city: '盐城', country: '建邺', gender: '女', name: '2' },
{ city: '徐州', country: '建邺', gender: '女', name: '3' },
{ city: '连云港', country: '新浦', gender: '女', name: 'aaa' },
{ city: '连云港', country: '新浦', gender: '男', name: 'aaa' },
{ city: '连云港', country: '新浦', gender: '女', name: 'bbb' },
{ city: '连云港', country: '新浦', gender: '男', name: 'ccd' },
{ city: '连云港', country: '海州', gender: '男', name: 'eee' },
{ city: '连云港', country: '海州', gender: '男', name: 'ccc' },
{ city: '连云港', country: '连云', gender: '女', name: 'aaa' },
{ city: '连云港', country: '赣榆', gender: '男', name: 'aaa' },
{ city: '连云港', country: '赣榆', gender: '男', name: 'aaa' },
{ city: '连云港', country: '赣榆', gender: '女', name: 'aaa' },
],
columnList: [{
prop: 'city',
label: '城市'
}, {
prop: 'country',
label: '区县'
}, {
prop: 'gender',
label: '性别'
}, {
prop: 'name',
label: '姓名'
}],
mergeKey: [0, 1, 2],
mergeObj: [],
margeStartLine: [],
n: 0
}
},
created() {
this.mergeObj = this.getMergeObj(this.tableData, 'city')
},
mounted() {
this.getMergeObj(this.tableData, 'city')
},
methods: {
getMergeObj(data, key, keyIndex) {
// startIndex, range
let curIndex = 0
let arr = []
let margeStartLine = []
for (let i = 0; i < data.length; i++) {
arr.push(0)
if (i == 0) {
curIndex = 0
margeStartLine.push(0)
} else {
let canMerge = false
let count = 0
for (let k = 0; k <= keyIndex; k++) {
let curKey = this.columnList[k].prop
if (data[i][curKey] == data[i - 1][curKey]) {
count++
}
}
if (count == keyIndex + 1) {
arr[curIndex] += 1
if (curIndex != margeStartLine[margeStartLine.length - 1]) {
margeStartLine.push(curIndex)
}
} else {
margeStartLine.push(i)
curIndex = i
}
}
}
return {
mergeArr: arr,
margeStartLine: margeStartLine
}
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
for (let k = 0; k < this.mergeKey.length; k++) {
let key = this.columnList[this.mergeKey[k]]
if (columnIndex === this.mergeKey[k]) {
let key = this.columnList[columnIndex].prop
let obj = this.getMergeObj(this.tableData, key, columnIndex)
let mergeArr = obj.mergeArr
let margeStartLine = obj.margeStartLine
if (margeStartLine.indexOf(rowIndex) > -1) {
let index = margeStartLine[margeStartLine.indexOf(rowIndex)]
return {
rowspan: mergeArr[index] + 1,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
if (this.mergeKey.indexOf(this.columnList[columnIndex].prop) > -1) {
let key = this.columnList[columnIndex].prop
// let { mergeObj, margeStartLine } = this.getMergeObj(this.tableData, key)
if (margeStartLine.indexOf(rowIndex) > -1) {
let index = margeStartLine[margeStartLine.indexOf(rowIndex)]
return {
rowspan: mergeObj[index] + 1,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
}
</script>
网友评论