vxe-grid与vxe-table实现表格尾部合并方式

<template>
  <vxe-grid
    border 
    :columns="columns"     
    :data="tableData"        
    show-footer       
    :footer-data="footerData" 
    :merge-footer-items="mergeFooterItems" 
  />
</template>

<script setup>
import { ref } from 'vue'

/**
 * 定义尾部单元格合并规则
 * 格式：{ row, col, rowspan, colspan }
 * - row: 尾部行索引（从 0 开始）
 * - col: 尾部列索引（从 0 开始）
 * - rowspan: 纵向合并的单元格数量
 * - colspan: 横向合并的单元格数量
 */
const mergeFooterItems = ref([
  { row: 0, col: 0, rowspan: 1, colspan: 2 } // 合并第1行的前两列
])

/**
 * 定义表格尾部数据
 * 每一项对应尾部的一行数据
 * 字段需与 columns 中定义的 field 保持一致
 */
const footerData = ref([
  { name: '总计', amount: '—', count: '100' } // 尾部显示“总计”信息
])


const columns = ref([
  //footerAlign: "right"---表格显示位置
  { field: 'name', title: '名称' ,footerAlign: "right"},
  { field: 'amount', title: '金额' },
  { field: 'count', title: '数量' }  
])


const tableData = ref([
  { name: '商品A', amount: 100, count: 50 }, 
  { name: '商品B', amount: 200, count: 30 } 
])
</script>

// 初始合并配置（合并前两列）
gridOptions.mergeFooterItems = [
  { row: 0, col: 0, rowspan: 1, colspan: 2 }
]

// 切换为合并后两列
function changeMerge() {
  gridOptions.mergeFooterItems = [
    { row: 0, col: 1, rowspan: 1, colspan: 2 }
  ]
}
 

<template>
  <vxe-table
    border
    show-footer
    :data="tableData"
    :footer-data="footerData"
    :merge-footer-items="mergeFooterItems"
  >
    <vxe-column field="name" title="名称" />
    <vxe-column field="amount" title="金额" />
    <vxe-column field="count" title="数量" />
  </vxe-table>
</template>

<script setup>
import { ref } from 'vue'

const mergeFooterItems = ref([
  { row: 0, col: 0, rowspan: 1, colspan: 2 }
])

//显示在那个列就写对应列的field---name显示在名称列
const footerData = ref([
  { name: '总计', amount: '—', count: '100' }
])

const tableData = ref([
  { name: '商品A', amount: 100, count: 50 },
  { name: '商品B', amount: 200, count: 30 }
])
</script>

const setMergeMode = (mode) => {
  mergeFooterItems.value = mode === 1 
    ? [{ row: 0, col: 0, colspan: 2 }] 
    : [{ row: 0, col: 1, colspan: 2 }]
}