提交产品列表

bms-front/src/views/data/region/index.vue

@@ -5,6 +5,7 @@
          :columns="columns"
          :search-columns="searchColumns"
          :query="queryList"
+         :span-method="objectSpanMethod"
          row-key="regionId"
       >
          <template #toolbar="{ selection, ids }">
@@ -285,6 +286,53 @@ function queryList(params) {
    return listRegion(params)
 }
 
+// 单元格合并：按「洲/大区」continent 合并相同大区的行（仅作用于 continent 列）
+// 关键：el-table 在 :data 引用变化时会重新调用 span-method，
+// 但这里 BasicTable 内部的 tableData 是异步请求回来的，父组件拿不到其引用，
+// 因此用 watch + nextTick + el-table.doLayout() 强制刷新。
+const spanMap = ref([])
+function rebuildSpanMap() {
+   const rows = tableRef.value?.getData?.() || []
+   const map = new Array(rows.length)
+   for (let i = 0; i < rows.length; i++) {
+      const cur = rows[i]?.continent
+      if (i > 0 && rows[i - 1]?.continent === cur) {
+         map[i] = { rowspan: 0, colspan: 0 }
+      } else {
+         let count = 1
+         while (i + count < rows.length && rows[i + count]?.continent === cur) count++
+         map[i] = { rowspan: count, colspan: 1 }
+      }
+   }
+   spanMap.value = map
+   // 强制 el-table 重新调用 span-method
+   tableRef.value?.getTableRef?.()?.doLayout?.()
+}
+function objectSpanMethod({ column, rowIndex }) {
+   if (column.property !== 'continent') return { rowspan: 1, colspan: 1 }
+   return spanMap.value[rowIndex] || { rowspan: 1, colspan: 1 }
+}
+// 监听 BasicTable 数据变化
+// 关键：expose.data 是 ref 对象；getData() 是 ()=>tableData.value 函数
+// watch 源用 getData() 函数（Vue 会调用 source getter 并比较返回值），
+// 每次 tableData.value 被重新赋值（分页/搜索/刷新），返回值（新数组）变化，watch 触发
+onMounted(() => {
+   let lastLen = -1
+   watch(
+      () => {
+         const ref = tableRef.value?.data
+         return ref?.value || []
+      },
+      (rows) => {
+         if (rows.length !== lastLen) {
+            lastLen = rows.length
+            nextTick(rebuildSpanMap)
+         }
+      },
+      { immediate: true }
+   )
+})
+
 const data = reactive({
    form: {},
    rules: {