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

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

/**
 * 定義尾部單元格合并規(guī)則
 * 格式：{ row, col, rowspan, colspan }
 * - row: 尾部行索引（從 0 開始）
 * - col: 尾部列索引（從 0 開始）
 * - rowspan: 縱向合并的單元格數(shù)量
 * - colspan: 橫向合并的單元格數(shù)量
 */
const mergeFooterItems = ref([
  { row: 0, col: 0, rowspan: 1, colspan: 2 } // 合并第1行的前兩列
])

/**
 * 定義表格尾部數(shù)據(jù)
 * 每一項對應(yīng)尾部的一行數(shù)據(jù)
 * 字段需與 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: '數(shù)量' }  
])


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="數(shù)量" />
  </vxe-table>
</template>

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

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

//顯示在那個列就寫對應(yīng)列的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 }]
}