@a2simcode/ui 0.0.264 → 0.0.265

package/docs/examples/table/custom-merge-cell.vue

@@ -0,0 +1,206 @@
+<template>
+  <div>
+    <el-radio-group v-model="mode" style="margin-bottom: 12px">
+      <el-radio-button value="array">数组模式</el-radio-button>
+      <el-radio-button value="function">回调函数模式</el-radio-button>
+    </el-radio-group>
+
+    <div style="position: relative; width: 100%; height: 500px">
+      <j-table
+        :columns="columns"
+        :records="records"
+        :custom-merge-cell="customMergeCell"
+        :is-show-number="false"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const mode = ref<'array' | 'function'>('array')
+
+const columns = ref([
+  { id: 'xiangmu', config: { label: '项目', width: 120, align: 'center' } },
+  { id: 'mokuai', config: { label: '模块', width: 120, align: 'center' } },
+  { id: 'fuzeren', config: { label: '负责人', width: 'auto', align: 'center' } },
+  { id: 'jindu', config: { label: '进度', width: 100, align: 'center' } },
+  { id: 'zhuangtai', config: { label: '状态', width: 100, align: 'center' } },
+  { id: 'beizhu', config: { label: '备注', width: 'auto', align: 'left' } },
+])
+
+const records = ref([
+  {
+    xiangmu: '项目A',
+    mokuai: '前端',
+    fuzeren: '张三',
+    jindu: '80%',
+    zhuangtai: '进行中',
+    beizhu: '按计划推进',
+  },
+  {
+    xiangmu: '项目A',
+    mokuai: '后端',
+    fuzeren: '李四',
+    jindu: '60%',
+    zhuangtai: '进行中',
+    beizhu: '接口开发中',
+  },
+  {
+    xiangmu: '项目A',
+    mokuai: '测试',
+    fuzeren: '王五',
+    jindu: '0%',
+    zhuangtai: '未开始',
+    beizhu: '等待开发完成',
+  },
+  {
+    xiangmu: '项目A',
+    mokuai: '设计',
+    fuzeren: '赵六',
+    jindu: '100%',
+    zhuangtai: '已完成',
+    beizhu: '',
+  },
+  {
+    xiangmu: '项目B',
+    mokuai: '前端',
+    fuzeren: '钱七',
+    jindu: '40%',
+    zhuangtai: '进行中',
+    beizhu: '需求变更',
+  },
+  {
+    xiangmu: '项目B',
+    mokuai: '后端',
+    fuzeren: '孙八',
+    jindu: '90%',
+    zhuangtai: '进行中',
+    beizhu: '即将收尾',
+  },
+  {
+    xiangmu: '项目B',
+    mokuai: '测试',
+    fuzeren: '周九',
+    jindu: '20%',
+    zhuangtai: '进行中',
+    beizhu: '部分测试中',
+  },
+  {
+    xiangmu: '项目B',
+    mokuai: '运维',
+    fuzeren: '吴十',
+    jindu: '0%',
+    zhuangtai: '未开始',
+    beizhu: '',
+  },
+  {
+    xiangmu: '项目C',
+    mokuai: '前端',
+    fuzeren: '郑十一',
+    jindu: '100%',
+    zhuangtai: '已完成',
+    beizhu: '',
+  },
+  {
+    xiangmu: '项目C',
+    mokuai: '后端',
+    fuzeren: '王十二',
+    jindu: '100%',
+    zhuangtai: '已完成',
+    beizhu: '',
+  },
+  {
+    xiangmu: '项目C',
+    mokuai: '测试',
+    fuzeren: '李十三',
+    jindu: '50%',
+    zhuangtai: '进行中',
+    beizhu: '回归测试中',
+  },
+])
+
+// 数组模式：静态定义合并规则（row 从 1 开始，0 是表头）
+const arrayRules = [
+  // 合并行：项目A 的"项目"列纵向合并 4 行
+  {
+    text: '项目A 汇总\n前端+后端+测试+设计',
+    range: { start: { col: 0, row: 1 }, end: { col: 0, row: 4 } },
+    style: { bgColor: '#e8f5e9', color: '#2e7d32' },
+  },
+  // 合并行：项目B 的"项目"列纵向合并 4 行
+  {
+    text: '项目B 汇总',
+    range: { start: { col: 0, row: 5 }, end: { col: 0, row: 8 } },
+    style: { bgColor: '#e3f2fd', color: '#1565c0' },
+  },
+  // 合并行：项目C 的"项目"列纵向合并 3 行
+  {
+    text: '项目C 汇总',
+    range: { start: { col: 0, row: 9 }, end: { col: 0, row: 11 } },
+    style: { bgColor: '#fff3e0', color: '#e65100' },
+  },
+  // 合并列+行：项目B 的进度/状态/备注 3 列 × 4 行合并为一个大单元格
+  {
+    text: '项目B 整体评估\n进度偏慢，需重点关注测试模块',
+    range: { start: { col: 3, row: 5 }, end: { col: 5, row: 8 } },
+    style: { bgColor: '#fce4ec', color: '#c62828' },
+  },
+  // 合并列+行：项目C 的进度/状态/备注 3 列 × 3 行合并为一个大单元格
+  {
+    text: '项目C 即将收尾\n前端后端已完成，测试进行中',
+    range: { start: { col: 3, row: 9 }, end: { col: 5, row: 11 } },
+    style: { bgColor: '#f3e5f5', color: '#6a1b9a' },
+  },
+]
+
+// 回调函数模式：根据 col/row 动态返回合并规则
+const funcMerge = (col: number, row: number) => {
+  // 合并"项目"列（col=0），row 从 1 开始（0 是表头）
+  if (col === 0) {
+    if (row >= 1 && row <= 4) {
+      return {
+        text: '项目A 汇总\n前端+后端+测试+设计',
+        range: { start: { col: 0, row: 1 }, end: { col: 0, row: 4 } },
+        style: { bgColor: '#e8f5e9', color: '#2e7d32' },
+      }
+    }
+    if (row >= 5 && row <= 8) {
+      return {
+        text: '项目B 汇总',
+        range: { start: { col: 0, row: 5 }, end: { col: 0, row: 8 } },
+        style: { bgColor: '#e3f2fd', color: '#1565c0' },
+      }
+    }
+    if (row >= 9 && row <= 11) {
+      return {
+        text: '项目C 汇总',
+        range: { start: { col: 0, row: 9 }, end: { col: 0, row: 11 } },
+        style: { bgColor: '#fff3e0', color: '#e65100' },
+      }
+    }
+  }
+  // 合并列+行：项目B 的进度/状态/备注 3 列 × 4 行
+  if (col >= 3 && col <= 5 && row >= 5 && row <= 8) {
+    return {
+      text: '项目B 整体评估\n进度偏慢，需重点关注测试模块',
+      range: { start: { col: 3, row: 5 }, end: { col: 5, row: 8 } },
+      style: { bgColor: '#fce4ec', color: '#c62828' },
+    }
+  }
+  // 合并列+行：项目C 的进度/状态/备注 3 列 × 3 行
+  if (col >= 3 && col <= 5 && row >= 9 && row <= 11) {
+    return {
+      text: '项目C 即将收尾\n前端后端已完成，测试进行中',
+      range: { start: { col: 3, row: 9 }, end: { col: 5, row: 11 } },
+      style: { bgColor: '#f3e5f5', color: '#6a1b9a' },
+    }
+  }
+  return undefined
+}
+
+const customMergeCell = computed(() => {
+  return mode.value === 'array' ? arrayRules : funcMerge
+})
+</script>

package/docs/examples/table/merge-cell.vue

@@ -0,0 +1,78 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'bumen',
+    config: {
+      label: '部门',
+      width: 120,
+      align: 'center',
+      // 自动合并相邻相同值的单元格
+      mergeCell: true,
+    },
+  },
+  {
+    id: 'zu',
+    config: {
+      label: '组',
+      width: 120,
+      align: 'center',
+      // 自定义合并：同部门且同组时才合并
+      mergeCell: (v1: unknown, v2: unknown, info: any) => {
+        const table = info.table
+        const r1 = info.source.row
+        const r2 = info.target.row
+        const bumenCol = table.getBodyColumnDefine('bumen')
+        const val1 = table.getCellValue(bumenCol?.col ?? 0, r1)
+        const val2 = table.getCellValue(bumenCol?.col ?? 0, r2)
+        return val1 === val2 && v1 === v2
+      },
+    },
+  },
+  {
+    id: 'xingming',
+    config: {
+      label: '姓名',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'zhiwei',
+    config: {
+      label: '职位',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'gongling',
+    config: {
+      label: '工龄(年)',
+      width: 100,
+      align: 'center',
+    },
+  },
+])
+
+const records = ref([
+  { bumen: '技术部', zu: '前端组', xingming: '张三', zhiwei: '高级工程师', gongling: 5 },
+  { bumen: '技术部', zu: '前端组', xingming: '李四', zhiwei: '工程师', gongling: 3 },
+  { bumen: '技术部', zu: '前端组', xingming: '王五', zhiwei: '初级工程师', gongling: 1 },
+  { bumen: '技术部', zu: '后端组', xingming: '赵六', zhiwei: '高级工程师', gongling: 6 },
+  { bumen: '技术部', zu: '后端组', xingming: '钱七', zhiwei: '工程师', gongling: 4 },
+  { bumen: '产品部', zu: '产品设计', xingming: '孙八', zhiwei: '产品经理', gongling: 4 },
+  { bumen: '产品部', zu: '产品设计', xingming: '周九', zhiwei: '产品助理', gongling: 2 },
+  { bumen: '产品部', zu: '用户研究', xingming: '吴十', zhiwei: '用研专家', gongling: 5 },
+  { bumen: '市场部', zu: '品牌组', xingming: '郑十一', zhiwei: '品牌经理', gongling: 7 },
+  { bumen: '市场部', zu: '品牌组', xingming: '王十二', zhiwei: '品牌专员', gongling: 2 },
+  { bumen: '市场部', zu: '渠道组', xingming: '李十三', zhiwei: '渠道经理', gongling: 5 },
+])
+</script>

package/docs/examples/table/row-fixed.vue

@@ -1,6 +1,12 @@
 <template>
   <div style="height: 360px">
-    <j-table v-model="records" is-row-fixed :row-num="5" :columns="columns" />
+    <j-table
+      v-model="records"
+      is-row-fixed
+      :row-num="5"
+      :columns="columns"
+      :edit-config="{ isAddBtn: true, isRemoveBtn: true }"
+    />
   </div>
 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2simcode/ui",
-  "version": "0.0.264",
+  "version": "0.0.265",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",
@@ -68,9 +68,9 @@
     "@codemirror/state": "6.6.0",
     "@codemirror/view": "6.40.0",
     "@iconify/vue": "5.0.0",
-    "@visactor/vtable": "1.26.1",
-    "@visactor/vtable-editors": "1.26.1",
-    "@visactor/vtable-plugins": "1.26.1",
+    "@visactor/vtable": "1.26.5",
+    "@visactor/vtable-editors": "1.26.5",
+    "@visactor/vtable-plugins": "1.26.5",
     "@vueuse/core": "14.2.1",
     "async-validator": "4.2.5",
     "codemirror": "6.0.2",