本文档记录了一位开发者在处理前端表格数据合并时遇到的问题及解决方案。首先尝试通过`span-method`处理单元格合并，但未能成功，问题在于合并逻辑未正确应用。然后采用另一种方式，通过自定义渲染函数实现了视觉上的单元格合并，但并非真正的表格合并。文章详细展示了代码示例和问题分析，对于理解前端表格渲染和数据处理有一定参考价值。
这个就是一个深坑，记录一下
开始我的思路是，整理数据合并单元格，代码如下（可跳过，不报错，但是不能实现,可以看出我输出了多少，找不到问题，望大佬指点）
<template>
<div>
<Title name="家族树" />
<div v-for="item in this.resData">{{item.name}}--{{item.mergeCol}}</div>
<Table :context="self" :columns="columns" :data="resData" :span-method="handleSpan" border :row-class-name="rowClassName">
<template slot-scope="{row}" slot="id">
{{row.id}}
</template>
</Table>
</div>
</template>
<script>
import Title from '../Title/index.vue'
export default {
components: { Title },
data () {
return {
self: this,
columns: [
{
title: '客户名称',
key: 'name'
},
{
title: '省市区',
key: 'address'
},
{
title: '客户归属',
key: 'customerBelongTo'
},
{
title: '客户状态',
key: 'stateMarker'
},
{
title: 'IS',
key: 'isItCode'
},
{
title: 'OS',
key: 'osItCode'
},
{
title: '行业经理',
key: 'managerItCode'
},
{
title: '管理分区',
key: 'manageDivision'
}
],
resData: [],
tableData: [],
names: []
}
},
created () {
this.getData()
},
methods: {
handleSpan ({ row, column, rowIndex, columnIndex }) {
// console.log(columnIndex)
// console.log(row.name)
//合并第二列,这里columnIndex==1 根据具体业务要在前端写死
if (columnIndex == 1) {
console.log(row.name)
// console.log(row)
//计算合并的行数列数
let x = row.mergeCol == 0 ? 0:row.mergeCol
let y = row.mergeCol == 0 ? 0:1
//console.log(x , y)
return [x, y]
}
// if (columnIndex == 0) {
// //计算合并的行数列数
// let x = row.mergeCol == 0 ? 0:row.mergeCol
// let y = row.mergeCol == 0 ? 0:1
// //console.log(x , y)
// return [x, y]
// }
},
assembleData(data){
console.log(data)
let names = this.names
//筛选出不重复的 name值,将其放到 names数组中
data.forEach(e => {
if(!names.includes(e.name)){
names.push(e.name)
}
})
console.log(names)
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中
// console.log(nameNums)
// console.log(data)
data.forEach(e => {
// debugger
console.log(names)
nameNums.forEach(n => {
if (n.name == e.name) {
console.log(111)
if(!this.names.includes(e.name)){
console.log(222)
e.mergeCol = n.num
this.names.splice(names.indexOf(n.name),1)
} else {
console.log('333'+e.mergeCol)
e.mergeCol = 0
console.log('444'+e.mergeCol)
}
console.log(e.mergeCol) //在这里可以正确输出
}
})
})
console.log(data)//在这里可以就不对了，研究好久没明白，望大佬指点
// //将整理后的数据交给表格渲染
this.resData = data
// console.log(this.resData)
},
rowClassName (row, index) {
if (row.name == "John Brown") {
return 'demo-table-info-row';
}
return '';
},
getData() { // 请求接口，整理数据
this.$post(this.GLOBAL.API_CUSTOMER_LEVEL, { customerId: this.$route.query.infoId }).then(res => {
let { retCode, data } = res.data
if (retCode != '200') return
// console.log(data)
let tableData = []
data.forEach(item =>{
// console.log(1111)
// console.log(item)
if (item.level == '2') {
item.list.forEach(list => {
var obj = Object.assign(item,list)
obj.address = `${item.province}-${item.county}-${item.city}`
tableData.push(obj)
})
}
if (item.level == '1') {
item.list.forEach(list => {
var obj = Object.assign(item,list)
obj.address = `${item.province}-${item.county}-${item.city}`
tableData.push(obj)
})
}
if (item.level == '0') {
item.list.forEach(list => {
var obj = Object.assign(item,list)
obj.address = `${item.province}-${item.county}-${item.city}`
tableData.push(obj)
})
}
})
// console.log("tableData")
// console.log(tableData)
this.tableData = tableData
// console.log(this.tableData)
this.assembleData(this.tableData)
})
}
}
}
</script>
<style>
.ivu-table .demo-table-info-row td{
font-weight: 700;
}
</style>
后换一种思路，可以实现，却不是正常的合并单元格，是表面上的，但是可以实现
正确代码如下
<template>
<div>
<Title name="家族树" />
<Table :context="self" :columns="columns" :data="tableData" :span-method="handleSpan" border :row-class-name="rowClassName">
<template slot-scope="{row}" slot="id">
{{row.id}}
</template>
</Table>
</div>
</template>
<script>
import Title from '../Title/index.vue'
export default {
components: { Title },
data () {
return {
self: this,
columns: [
{
title: '客户名称',
key: 'name'
},
{
title: '省市区',
key: 'address',
render: (h, params) => {
var address = `${params.row.province}-${params.row.city}-${params.row.county}`
return h('span' ,address);
}
},
{
title: '客户归属',
key: 'list',
render: (h, params) => {
return h('div', {
attrs: {
class:'subCol'
},
}, [
h('ul', params.row.list.map(item => {
return h('li', {
}, item.customerBelongTo)
}))
]);
}
},
{
title: '客户状态',
key: 'list',
render: (h, params) => {
return h('div', {
attrs: {
class:'subCol'
},
}, [
h('ul', params.row.list.map(item => {
return h('li', {
}, item.stateMarker)
}))
]);
}
},
{
title: 'IS',
key: 'list',
render: (h, params) => {
return h('div', {
attrs: {
class:'subCol'
},
}, [
h('ul', params.row.list.map(item => {
return h('li', {
}, item.isItCode)
}))
]);
}
},
{
title: 'OS',
key: 'list',
render: (h, params) => {
return h('div', {
attrs: {
class:'subCol'
},
}, [
h('ul', params.row.list.map(item => {
return h('li', {
}, item.osItCode)
}))
]);
}
},
{
title: '行业经理',
key: 'list',
render: (h, params) => {
return h('div', {
attrs: {
class:'subCol'
},
}, [
h('ul', params.row.list.map(item => {
return h('li', {
}, item.managerItCode)
}))
]);
}
},
{
title: '管理分区',
key: 'list',
render: (h, params) => {
return h('div', {
attrs: {
class:'subCol'
},
}, [
h('ul', params.row.list.map(item => {
return h('li', {
}, item.manageDivision)
}))
]);
}
}
],
resData: [],
tableData: [],
names: []
}
},
created () {
this.getData()
},
methods: {
rowClassName (row) {
if (row.level == "1") {
return 'demo-table-info-row';
}
return '';
},
getData() {
this.$post(this.GLOBAL.API_CUSTOMER_LEVEL, { customerId: this.$route.query.infoId }).then(res => {
let { retCode, data } = res.data
if (retCode != '200') return
this.tableData = res.data.data
})
}
}
}
</script>
<style>
.ivu-table .demo-table-info-row td{
font-weight: 700;
}
.subCol>ul>li{
margin:0 -18px;
list-style:none;
text-align: center;
border-bottom:1px solid #ccc;
overflow-x: hidden;
height: 50px;
line-height: 50px;
}
.subCol>ul>li:last-child{
border-bottom: none
}
</style>
扫一扫
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
