@a2simcode/ui 0.0.54 → 0.0.56

package/docs/examples/table/actions.vue

@@ -1,116 +1,116 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table :columns="columns" :records="records" :actions="actions" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const columns = ref([
-  {
-    id: 'name',
-    config: {
-      label: '名称',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'status',
-    config: {
-      label: '状态',
-      width: 'auto',
-      align: 'center',
-    },
-  },
-  {
-    id: 'updateTime',
-    config: {
-      label: '最近更新时间',
-      width: 'auto',
-      align: 'center',
-    },
-  },
-])
-
-const records = ref([
-  {
-    id: '1',
-    name: '项目A',
-    status: '进行中',
-    updateTime: '2025-12-25 20:55:52',
-  },
-  {
-    id: '2',
-    name: '项目B',
-    status: '已完成',
-    updateTime: '2025-12-25 20:51:17',
-  },
-  {
-    id: '3',
-    name: '项目C',
-    status: '待审核',
-    updateTime: '2025-12-25 20:51:11',
-  },
-  {
-    id: '4',
-    name: '项目D',
-    status: '已归档',
-    updateTime: '2025-12-24 16:43:50',
-  },
-  {
-    id: '5',
-    name: '项目E',
-    status: '进行中',
-    updateTime: '2025-12-23 17:22:07',
-  },
-])
-
-const actions = ref([
-  {
-    id: 'edit',
-    label: '编辑',
-    click: (row: Record<string, any>) => {
-      ElMessage.success(`编辑: ${row.name}`)
-    },
-  },
-  {
-    id: 'delete',
-    label: '删除',
-    isDanger: true,
-    click: (row: Record<string, any>) => {
-      ElMessage.warning(`删除: ${row.name}`)
-    },
-  },
-  {
-    id: 'copy',
-    label: '复制',
-    click: (row: Record<string, any>) => {
-      ElMessage.info(`复制: ${row.name}`)
-    },
-  },
-  {
-    id: 'export',
-    label: '导出',
-    click: (row: Record<string, any>) => {
-      ElMessage.info(`导出: ${row.name}`)
-    },
-  },
-  {
-    id: 'preview',
-    label: '预览',
-    click: (row: Record<string, any>) => {
-      ElMessage.info(`预览: ${row.name}`)
-    },
-  },
-  {
-    id: 'history',
-    label: '历史记录',
-    click: (row: Record<string, any>) => {
-      ElMessage.info(`历史记录: ${row.name}`)
-    },
-  },
-])
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table :columns="columns" :records="records" :actions="actions" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '名称',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'status',
+    config: {
+      label: '状态',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'updateTime',
+    config: {
+      label: '最近更新时间',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: '1',
+    name: '项目A',
+    status: '进行中',
+    updateTime: '2025-12-25 20:55:52',
+  },
+  {
+    id: '2',
+    name: '项目B',
+    status: '已完成',
+    updateTime: '2025-12-25 20:51:17',
+  },
+  {
+    id: '3',
+    name: '项目C',
+    status: '待审核',
+    updateTime: '2025-12-25 20:51:11',
+  },
+  {
+    id: '4',
+    name: '项目D',
+    status: '已归档',
+    updateTime: '2025-12-24 16:43:50',
+  },
+  {
+    id: '5',
+    name: '项目E',
+    status: '进行中',
+    updateTime: '2025-12-23 17:22:07',
+  },
+])
+
+const actions = ref([
+  {
+    id: 'edit',
+    label: '编辑',
+    click: (row: Record<string, any>) => {
+      ElMessage.success(`编辑: ${row.name}`)
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    isDanger: true,
+    click: (row: Record<string, any>) => {
+      ElMessage.warning(`删除: ${row.name}`)
+    },
+  },
+  {
+    id: 'copy',
+    label: '复制',
+    click: (row: Record<string, any>) => {
+      ElMessage.info(`复制: ${row.name}`)
+    },
+  },
+  {
+    id: 'export',
+    label: '导出',
+    click: (row: Record<string, any>) => {
+      ElMessage.info(`导出: ${row.name}`)
+    },
+  },
+  {
+    id: 'preview',
+    label: '预览',
+    click: (row: Record<string, any>) => {
+      ElMessage.info(`预览: ${row.name}`)
+    },
+  },
+  {
+    id: 'history',
+    label: '历史记录',
+    click: (row: Record<string, any>) => {
+      ElMessage.info(`历史记录: ${row.name}`)
+    },
+  },
+])
+</script>

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

@@ -1,103 +1,103 @@
-<template>
-  <div>
-    <div style="margin-bottom: 16px">
-      <j-button label="外部改变数据" @click="changeData" />
-    </div>
-    <div style="height: 400px">
-      <j-table
-        v-model="records"
-        :columns="columns"
-        :edit-config="{ isAddBtn: true, addBtnText: '新增人员', isRemoveBtn: true }"
-        @change="handleChange"
-      />
-    </div>
-    <div style="margin-top: 16px">
-      <h3>当前数据：</h3>
-      <pre>{{ records }}</pre>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([
-  {
-    id: 'name',
-    type: 'j-input',
-    config: {
-      label: '姓名',
-      width: 120,
-      defaultValue: '新用户',
-    },
-  },
-  {
-    id: 'age',
-    type: 'j-number',
-    config: {
-      label: '年龄',
-      width: 100,
-      defaultValue: 18,
-    },
-  },
-  {
-    id: 'status',
-    type: 'j-select',
-    config: {
-      label: '状态',
-      width: 120,
-      options: [
-        { label: '在职', value: 'active' },
-        { label: '离职', value: 'inactive' },
-      ],
-      defaultValue: 'active',
-    },
-  },
-])
-
-const records = ref([
-  {
-    id: '1',
-    name: '张三',
-    age: 28,
-    status: 'active',
-  },
-  {
-    id: '2',
-    name: '李四',
-    age: 32,
-    status: 'inactive',
-  },
-])
-
-const handleChange = (params: any) => {
-  console.log('表格变更：', params)
-  if (params.type === 'add') {
-    // 新增行时，同步更新 records
-    records.value.push(params.value)
-  } else if (params.type === 'delete') {
-    // 删除行时，从 records 中移除对应的数据
-    const index = records.value.findIndex((item) => item.id === params.data.id)
-    if (index > -1) {
-      records.value.splice(index, 1)
-    }
-  }
-}
-
-const changeData = () => {
-  records.value = [
-    {
-      id: '3',
-      name: '王五',
-      age: 20,
-      status: 'active',
-    },
-    {
-      id: '4',
-      name: '赵六',
-      age: 25,
-      status: 'inactive',
-    },
-  ]
-}
-</script>
+<template>
+  <div>
+    <div style="margin-bottom: 16px">
+      <j-button label="外部改变数据" @click="changeData" />
+    </div>
+    <div style="height: 400px">
+      <j-table
+        v-model="records"
+        :columns="columns"
+        :edit-config="{ isAddBtn: true, addBtnText: '新增人员', isRemoveBtn: true }"
+        @change="handleChange"
+      />
+    </div>
+    <div style="margin-top: 16px">
+      <h3>当前数据：</h3>
+      <pre>{{ records }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    type: 'j-input',
+    config: {
+      label: '姓名',
+      width: 120,
+      defaultValue: '新用户',
+    },
+  },
+  {
+    id: 'age',
+    type: 'j-number',
+    config: {
+      label: '年龄',
+      width: 100,
+      defaultValue: 18,
+    },
+  },
+  {
+    id: 'status',
+    type: 'j-select',
+    config: {
+      label: '状态',
+      width: 120,
+      options: [
+        { label: '在职', value: 'active' },
+        { label: '离职', value: 'inactive' },
+      ],
+      defaultValue: 'active',
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: '1',
+    name: '张三',
+    age: 28,
+    status: 'active',
+  },
+  {
+    id: '2',
+    name: '李四',
+    age: 32,
+    status: 'inactive',
+  },
+])
+
+const handleChange = (params: any) => {
+  console.log('表格变更：', params)
+  if (params.type === 'add') {
+    // 新增行时，同步更新 records
+    records.value.push(params.value)
+  } else if (params.type === 'delete') {
+    // 删除行时，从 records 中移除对应的数据
+    const index = records.value.findIndex((item) => item.id === params.data.id)
+    if (index > -1) {
+      records.value.splice(index, 1)
+    }
+  }
+}
+
+const changeData = () => {
+  records.value = [
+    {
+      id: '3',
+      name: '王五',
+      age: 20,
+      status: 'active',
+    },
+    {
+      id: '4',
+      name: '赵六',
+      age: 25,
+      status: 'inactive',
+    },
+  ]
+}
+</script>