Vue实现table合并相同列

1、在vue页面methods定义方法

methods: {

flitterData () {

const spanOneArr = []

let concatOne = 0

// 循环后端查询出来的数据(tableData)，这里直接在data()中定义好了

this.tableData.forEach((item, index) => {

if (index === 0) {

spanOneArr.push(1)

} else {

// 需合并一样内容的字段，根据id判断，将id一样的name、classname合并

if (item.id === this.tableData[index – 1].id) {

spanOneArr[concatOne] += 1

spanOneArr.push(0)

} else {

spanOneArr.push(1)

concatOne = index

}

}

})

return {

one: spanOneArr

}

},

objectSpanMethod ({ row, column, rowIndex, columnIndex }) {

// 判断是否是第一、二列，如果是就将第一、二列一样字段进行合并

if (columnIndex === 0 || columnIndex === 1) {

// this.tableData 修改

const _row = (this.flitterData(this.tableData).one)[rowIndex]

const _col = _row > 0 ? 1 : 0

return {

rowspan: _row,

colspan: _col

}

}

}

}

2、在vue页面定义data

data () {

return {

// 接收后端传值数据

tableData: []

}

}

3、在vue页面定义table

<el-table>标签中用 span-method引用定义的objectSpanMethod方法

<el-table

ref=”projectTable”

v-loading=”loading”

:data=”tableData”

:span-method=”objectSpanMethod”

border

:header-cell-style=”{color: 'black',fontWeight: 'bold',textAlign: 'center'}”

:cell-style=”{ textAlign: 'center' }”

height=”590px”>

<el-table-column prop=”name” label=”名称” show-overflow-tooltip />

<el-table-column prop=”classname” label=”班级” show-overflow-tooltip />

<el-table-column prop=”class” label=”课程” show-overflow-tooltip />

<el-table-column prop=”source” label=”分数” show-overflow-tooltip/>

</el-table>

完整代码：

<template>

<app-container>

<el-table

ref=”projectTable”

v-loading=”loading”

:data=”tableData”

:span-method=”objectSpanMethod”

border

:header-cell-style=”{color: 'black',fontWeight: 'bold',textAlign: 'center'}”

:cell-style=”{ textAlign: 'center' }”

height=”590px”>

<el-table-column prop=”name” label=”名称” show-overflow-tooltip />

<el-table-column prop=”classname” label=”班级” show-overflow-tooltip />

<el-table-column prop=”class” label=”课程” show-overflow-tooltip />

<el-table-column prop=”source” label=”分数” show-overflow-tooltip/>

</el-table>

</app-container>

</template>

<script>

export default {

data () {

return {

data: [

{ id: 1, name: '张三', classname: '一班', class: '数学', source: 99 },

{ id: 1, name: '张三', classname: '一班', class: '语文', source: 89 },

{ id: 1, name: '张三', classname: '一班', class: '英语', source: 79 },

{ id: 1, name: '张三', classname: '一班', class: '化学', source: 89 },

{ id: 2, name: '王五', classname: '一班', class: '数学', source: 69 },

{ id: 2, name: '王五', classname: '一班', class: '语文', source: 79 },

{ id: 2, name: '王五', classname: '一班', class: '英语', source: 89 },

{ id: 2, name: '王五', classname: '一班', class: '化学', source: 89 },

{ id: 3, name: '赵四', classname: '一班', class: '数学', source: 69 },

{ id: 3, name: '赵四', classname: '一班', class: '语文', source: 79 },

{ id: 3, name: '赵四', classname: '一班', class: '英语', source: 89 },

{ id: 3, name: '赵四', classname: '一班', class: '化学', source: 89 }

],

tableData: []

}

},

async mounted () {

this.getData()

},

methods: {

flitterData () {

const spanOneArr = []

let concatOne = 0

// 循环后端查询出来的数据(tableData)，这里直接在data()中定义好了

this.tableData.forEach((item, index) => {

if (index === 0) {

spanOneArr.push(1)

} else {

// 需合并一样内容的字段，根据id判断，将id一样的name、classname合并

if (item.id === this.tableData[index – 1].id) {

spanOneArr[concatOne] += 1

spanOneArr.push(0)

} else {

spanOneArr.push(1)

concatOne = index

}

}

})

return {

one: spanOneArr

}

},

objectSpanMethod ({ row, column, rowIndex, columnIndex }) {

// 判断是否是第一、二列，如果是就将第一、二列一样字段进行合并

if (columnIndex === 0 || columnIndex === 1) {

// this.tableData 修改

const _row = (this.flitterData(this.tableData).one)[rowIndex]

const _col = _row > 0 ? 1 : 0

return {

rowspan: _row,

colspan: _col

}

}

},

getData () {

// 请求后端方法，返回数值

this.tableData = this.data

}

}

}

</script>

效果图：