vue前后端传参(Vue实现table合并相同列)

很多朋友对于vue前后端传参和vue前后端传参不太懂，今天就由小编来为大家分享，希望可以帮助到大家，接下来一起来看看吧！

methods: {

flitterData () {

const spanOneArr = []

let concatOne = 0

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

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

if (index === 0) {

spanOneArr.push(1)

} else {

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

标签中用 span-method引用定义的objectSpanMethod方法

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">

完整代码：

[xss_clean]

export default {

data () {

return {

data: [

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 {

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

[xss_clean]

OK，本文到此结束，希望对大家有所帮助。