@a2simcode/ui 0.0.265 → 0.0.266

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

@@ -1,78 +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>
+<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/multiple-disabled.vue

@@ -1,112 +1,112 @@
-<template>
-  <div style="margin-bottom: 10px; display: flex; gap: 8px">
-    <j-button type="primary" label="获取选中数据" @click="getSelection" />
-    <j-button label="尝试选中前四行" @click="setSelection" />
-  </div>
-  <div style="margin-bottom: 10px; color: #606266; font-size: 13px">
-    状态为“已锁定”的行会禁用多选框，调用 `setSelection` 时也会自动跳过这些行。
-  </div>
-  <div style="position: relative; width: 100%; height: 420px">
-    <j-table
-      ref="tableRef"
-      :columns="columns"
-      :records="records"
-      row-key="id"
-      is-multiple
-      :multiple-disabled="isMultipleDisabled"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const tableRef = ref()
-
-const getSelection = () => {
-  const selectedRecords = tableRef.value?.getSelection?.() || []
-  console.log(selectedRecords)
-  alert(`当前选中了 ${selectedRecords.length} 条数据，详情请查看控制台`)
-}
-
-const setSelection = () => {
-  tableRef.value?.setSelection?.(records.value.slice(0, 4))
-}
-
-const isMultipleDisabled = (record: Record<string, any>) => {
-  return record.status === '已锁定'
-}
-
-const columns = ref([
-  {
-    id: 'name',
-    config: {
-      label: '任务名称',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'owner',
-    config: {
-      label: '负责人',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'status',
-    config: {
-      label: '状态',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'remark',
-    config: {
-      label: '说明',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-])
-
-const records = ref([
-  {
-    id: 'task-001',
-    name: '需求评审',
-    owner: '张三',
-    status: '处理中',
-    remark: '可选择',
-  },
-  {
-    id: 'task-002',
-    name: '接口联调',
-    owner: '李四',
-    status: '已锁定',
-    remark: '已锁定，禁止选择',
-  },
-  {
-    id: 'task-003',
-    name: '页面开发',
-    owner: '王五',
-    status: '待处理',
-    remark: '可选择',
-  },
-  {
-    id: 'task-004',
-    name: '数据回归',
-    owner: '赵六',
-    status: '已锁定',
-    remark: '已锁定，禁止选择',
-  },
-  {
-    id: 'task-005',
-    name: '上线检查',
-    owner: '钱七',
-    status: '处理中',
-    remark: '可选择',
-  },
-])
-</script>
+<template>
+  <div style="margin-bottom: 10px; display: flex; gap: 8px">
+    <j-button type="primary" label="获取选中数据" @click="getSelection" />
+    <j-button label="尝试选中前四行" @click="setSelection" />
+  </div>
+  <div style="margin-bottom: 10px; color: #606266; font-size: 13px">
+    状态为“已锁定”的行会禁用多选框，调用 `setSelection` 时也会自动跳过这些行。
+  </div>
+  <div style="position: relative; width: 100%; height: 420px">
+    <j-table
+      ref="tableRef"
+      :columns="columns"
+      :records="records"
+      row-key="id"
+      is-multiple
+      :multiple-disabled="isMultipleDisabled"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tableRef = ref()
+
+const getSelection = () => {
+  const selectedRecords = tableRef.value?.getSelection?.() || []
+  console.log(selectedRecords)
+  alert(`当前选中了 ${selectedRecords.length} 条数据，详情请查看控制台`)
+}
+
+const setSelection = () => {
+  tableRef.value?.setSelection?.(records.value.slice(0, 4))
+}
+
+const isMultipleDisabled = (record: Record<string, any>) => {
+  return record.status === '已锁定'
+}
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '任务名称',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'owner',
+    config: {
+      label: '负责人',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'status',
+    config: {
+      label: '状态',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'remark',
+    config: {
+      label: '说明',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: 'task-001',
+    name: '需求评审',
+    owner: '张三',
+    status: '处理中',
+    remark: '可选择',
+  },
+  {
+    id: 'task-002',
+    name: '接口联调',
+    owner: '李四',
+    status: '已锁定',
+    remark: '已锁定，禁止选择',
+  },
+  {
+    id: 'task-003',
+    name: '页面开发',
+    owner: '王五',
+    status: '待处理',
+    remark: '可选择',
+  },
+  {
+    id: 'task-004',
+    name: '数据回归',
+    owner: '赵六',
+    status: '已锁定',
+    remark: '已锁定，禁止选择',
+  },
+  {
+    id: 'task-005',
+    name: '上线检查',
+    owner: '钱七',
+    status: '处理中',
+    remark: '可选择',
+  },
+])
+</script>