@a2simcode/ui 0.0.70 → 0.0.72

package/docs/examples/table/editable.vue

@@ -1,262 +1,263 @@
-<template>
-  <div>
-    <div style="position: relative; width: 100%; height: 600px">
-      <j-table :columns="columns" :records="records" :is-show-number="true" />
-    </div>
-    <div style="margin-top: 16px; padding: 12px; background: #f5f7fa; border-radius: 4px">
-      <div style="color: #909399">
-        点击单元格进行编辑... 所有表单组件类型都已集成到此可编辑表格中
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-// 表格列配置 - 包含所有可用的表单组件类型
-const columns = ref([
-  {
-    id: 'name',
-    type: 'j-input', // 文本输入框
-    config: {
-      label: '姓名',
-      width: 120,
-      placeholder: '请输入姓名',
-    },
-  },
-  {
-    id: 'age',
-    type: 'j-number', // 数字输入框
-    config: {
-      label: '年龄',
-      width: 100,
-      min: 0,
-      max: 150,
-      placeholder: '请输入年龄',
-    },
-  },
-  {
-    id: 'status',
-    type: 'j-select', // 下拉选择
-    config: {
-      label: '状态',
-      width: 120,
-      options: [
-        { label: '在职', value: 'active' },
-        { label: '离职', value: 'inactive' },
-        { label: '休假', value: 'vacation' },
-        { label: '试用期', value: 'probation' },
-      ],
-      placeholder: '请选择状态',
-    },
-  },
-  {
-    id: 'gender',
-    type: 'j-radio', // 单选框
-    config: {
-      label: '性别',
-      width: 150,
-      options: [
-        { label: '男', value: 'male' },
-        { label: '女', value: 'female' },
-        { label: '其他', value: 'other' },
-      ],
-    },
-  },
-  {
-    id: 'skills',
-    type: 'j-checkbox', // 多选框
-    config: {
-      label: '技能',
-      width: 200,
-      options: [
-        { label: 'JavaScript', value: 'js' },
-        { label: 'Vue', value: 'vue' },
-        { label: 'React', value: 'react' },
-        { label: 'Node.js', value: 'node' },
-        { label: 'Python', value: 'python' },
-      ],
-    },
-  },
-  {
-    id: 'isActive',
-    type: 'j-switch', // 开关
-    config: {
-      label: '是否在职',
-      width: 100,
-      readonly: true,
-    },
-  },
-  {
-    id: 'description',
-    type: 'j-textarea', // 多行文本
-    config: {
-      label: '描述',
-      width: 200,
-      rows: 2,
-      placeholder: '请输入详细描述',
-    },
-  },
-  {
-    id: 'location',
-    type: 'j-cascader-select', // 级联选择
-    config: {
-      label: '地区',
-      width: 200,
-      options: [
-        {
-          value: 'beijing',
-          label: '北京',
-          children: [
-            { value: 'chaoyang', label: '朝阳区' },
-            { value: 'haidian', label: '海淀区' },
-          ],
-        },
-        {
-          value: 'shanghai',
-          label: '上海',
-          children: [
-            { value: 'pudong', label: '浦东新区' },
-            { value: 'jingan', label: '静安区' },
-          ],
-        },
-        {
-          value: 'guangdong',
-          label: '广东',
-          children: [
-            { value: 'guangzhou', label: '广州' },
-            { value: 'shenzhen', label: '深圳' },
-          ],
-        },
-      ],
-      placeholder: '请选择地区',
-    },
-  },
-  {
-    id: 'searchTerm',
-    type: 'j-autocomplete', // 自动补全
-    config: {
-      label: '搜索',
-      width: 150,
-      options: [
-        { label: 'Apple', value: 'apple' },
-        { label: 'Banana', value: 'banana' },
-        { label: 'Cherry', value: 'cherry' },
-        { label: 'Date', value: 'date' },
-        { label: 'Elderberry', value: 'elderberry' },
-      ],
-      placeholder: '请输入搜索词',
-    },
-  },
-  {
-    id: 'rating',
-    type: 'j-rate', // 评分
-    config: {
-      label: '评分',
-      width: 150,
-      max: 5,
-      allowHalf: true,
-    },
-  },
-  {
-    id: 'volume',
-    type: 'j-slider', // 滑块
-    config: {
-      label: '音量',
-      width: 150,
-      min: 0,
-      max: 100,
-      step: 10,
-    },
-  },
-  {
-    id: 'tags',
-    type: 'j-input-tag', // 标签输入
-    config: {
-      label: '标签',
-      width: 200,
-      placeholder: '输入标签，回车添加',
-    },
-  },
-])
-
-// 表格数据
-const records = ref([
-  {
-    name: '张三',
-    age: 28,
-    status: 'active',
-    gender: 'male',
-    skills: 'js,vue',
-    isActive: true,
-    description: '资深前端工程师',
-    verification: '',
-    location: 'beijing,chaoyang',
-    searchTerm: 'Apple',
-    rating: 4.5,
-    volume: 70,
-    tags: '技术专家,团队领导',
-  },
-  {
-    name: '李四',
-    age: 32,
-    status: 'active',
-    gender: 'female',
-    skills: 'react,node',
-    isActive: true,
-    description: '产品经理',
-    verification: '',
-    location: 'shanghai,pudong',
-    searchTerm: 'Banana',
-    rating: 4,
-    volume: 50,
-    tags: '产品专家',
-  },
-  {
-    name: '王五',
-    age: 25,
-    status: 'vacation',
-    gender: 'male',
-    skills: 'python,js',
-    isActive: false,
-    description: 'UI设计师',
-    verification: '',
-    location: 'guangdong,shenzhen',
-    searchTerm: 'Cherry',
-    rating: 5,
-    volume: 80,
-    tags: '设计师,创意',
-  },
-  {
-    name: '赵六',
-    age: 35,
-    status: 'inactive',
-    gender: 'female',
-    skills: 'js,react,node',
-    isActive: false,
-    description: '市场总监',
-    verification: '',
-    location: 'beijing,haidian',
-    searchTerm: 'Date',
-    rating: 3.5,
-    volume: 60,
-    tags: '市场,管理',
-  },
-  {
-    name: '钱七',
-    age: 29,
-    status: 'active',
-    gender: 'male',
-    skills: 'vue,node',
-    isActive: true,
-    description: '后端工程师',
-    verification: '',
-    location: 'shanghai,jingan',
-    searchTerm: 'Elderberry',
-    rating: 4,
-    volume: 40,
-    tags: '后端,架构',
-  },
-])
-</script>
+<template>
+  <div>
+    <div style="position: relative; width: 100%; height: 600px">
+      <j-table :columns="columns" :records="records" :is-show-number="true" />
+    </div>
+    <div style="margin-top: 16px; padding: 12px; background: #f5f7fa; border-radius: 4px">
+      <div style="color: #909399">
+        点击单元格进行编辑... 所有表单组件类型都已集成到此可编辑表格中
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 表格列配置 - 包含所有可用的表单组件类型
+const columns = ref([
+  {
+    id: 'name',
+    type: 'j-input', // 文本输入框
+    config: {
+      label: '姓名',
+      width: 120,
+      placeholder: '请输入姓名',
+    },
+  },
+  {
+    id: 'age',
+    type: 'j-number', // 数字输入框
+    config: {
+      label: '年龄',
+      width: 100,
+      min: 0,
+      max: 150,
+      placeholder: '请输入年龄',
+    },
+  },
+  {
+    id: 'status',
+    type: 'j-select', // 下拉选择
+    config: {
+      label: '状态',
+      width: 120,
+      options: [
+        { label: '在职', value: 'active' },
+        { label: '离职', value: 'inactive' },
+        { label: '休假', value: 'vacation' },
+        { label: '试用期', value: 'probation' },
+      ],
+      placeholder: '请选择状态',
+    },
+  },
+  {
+    id: 'gender',
+    type: 'j-radio', // 单选框
+    config: {
+      label: '性别',
+      width: 150,
+      options: [
+        { label: '男', value: 'male' },
+        { label: '女', value: 'female' },
+        { label: '其他', value: 'other' },
+      ],
+    },
+  },
+  {
+    id: 'skills',
+    type: 'j-checkbox', // 多选框
+    config: {
+      label: '技能',
+      width: 200,
+      options: [
+        { label: 'JavaScript', value: 'js' },
+        { label: 'Vue', value: 'vue' },
+        { label: 'React', value: 'react' },
+        { label: 'Node.js', value: 'node' },
+        { label: 'Python', value: 'python' },
+      ],
+    },
+  },
+  {
+    id: 'isActive',
+    type: 'j-switch', // 开关
+    config: {
+      label: '是否在职',
+      width: 100,
+      align: 'center',
+      readonly: true,
+    },
+  },
+  {
+    id: 'description',
+    type: 'j-textarea', // 多行文本
+    config: {
+      label: '描述',
+      width: 200,
+      rows: 2,
+      placeholder: '请输入详细描述',
+    },
+  },
+  {
+    id: 'location',
+    type: 'j-cascader-select', // 级联选择
+    config: {
+      label: '地区',
+      width: 200,
+      options: [
+        {
+          value: 'beijing',
+          label: '北京',
+          children: [
+            { value: 'chaoyang', label: '朝阳区' },
+            { value: 'haidian', label: '海淀区' },
+          ],
+        },
+        {
+          value: 'shanghai',
+          label: '上海',
+          children: [
+            { value: 'pudong', label: '浦东新区' },
+            { value: 'jingan', label: '静安区' },
+          ],
+        },
+        {
+          value: 'guangdong',
+          label: '广东',
+          children: [
+            { value: 'guangzhou', label: '广州' },
+            { value: 'shenzhen', label: '深圳' },
+          ],
+        },
+      ],
+      placeholder: '请选择地区',
+    },
+  },
+  {
+    id: 'searchTerm',
+    type: 'j-autocomplete', // 自动补全
+    config: {
+      label: '搜索',
+      width: 150,
+      options: [
+        { label: 'Apple', value: 'apple' },
+        { label: 'Banana', value: 'banana' },
+        { label: 'Cherry', value: 'cherry' },
+        { label: 'Date', value: 'date' },
+        { label: 'Elderberry', value: 'elderberry' },
+      ],
+      placeholder: '请输入搜索词',
+    },
+  },
+  {
+    id: 'rating',
+    type: 'j-rate', // 评分
+    config: {
+      label: '评分',
+      width: 150,
+      max: 5,
+      allowHalf: true,
+    },
+  },
+  {
+    id: 'volume',
+    type: 'j-slider', // 滑块
+    config: {
+      label: '音量',
+      width: 150,
+      min: 0,
+      max: 100,
+      step: 10,
+    },
+  },
+  {
+    id: 'tags',
+    type: 'j-input-tag', // 标签输入
+    config: {
+      label: '标签',
+      width: 200,
+      placeholder: '输入标签，回车添加',
+    },
+  },
+])
+
+// 表格数据
+const records = ref([
+  {
+    name: '张三',
+    age: 28,
+    status: 'active',
+    gender: 'male',
+    skills: 'js,vue',
+    isActive: true,
+    description: '资深前端工程师',
+    verification: '',
+    location: 'beijing,chaoyang',
+    searchTerm: 'Apple',
+    rating: 4.5,
+    volume: 70,
+    tags: '技术专家,团队领导',
+  },
+  {
+    name: '李四',
+    age: 32,
+    status: 'active',
+    gender: 'female',
+    skills: 'react,node',
+    isActive: true,
+    description: '产品经理',
+    verification: '',
+    location: 'shanghai,pudong',
+    searchTerm: 'Banana',
+    rating: 4,
+    volume: 50,
+    tags: '产品专家',
+  },
+  {
+    name: '王五',
+    age: 25,
+    status: 'vacation',
+    gender: 'male',
+    skills: 'python,js',
+    isActive: false,
+    description: 'UI设计师',
+    verification: '',
+    location: 'guangdong,shenzhen',
+    searchTerm: 'Cherry',
+    rating: 5,
+    volume: 80,
+    tags: '设计师,创意',
+  },
+  {
+    name: '赵六',
+    age: 35,
+    status: 'inactive',
+    gender: 'female',
+    skills: 'js,react,node',
+    isActive: false,
+    description: '市场总监',
+    verification: '',
+    location: 'beijing,haidian',
+    searchTerm: 'Date',
+    rating: 3.5,
+    volume: 60,
+    tags: '市场,管理',
+  },
+  {
+    name: '钱七',
+    age: 29,
+    status: 'active',
+    gender: 'male',
+    skills: 'vue,node',
+    isActive: true,
+    description: '后端工程师',
+    verification: '',
+    location: 'shanghai,jingan',
+    searchTerm: 'Elderberry',
+    rating: 4,
+    volume: 40,
+    tags: '后端,架构',
+  },
+])
+</script>