feat(table): add editable DatePicker & TimePicker (#654)

为表格的可编辑单元格添加日期选择框和时间选择框组件
vbenjs · May 26, 2021 · 93006c7 · 93006c7
1 parent 4f0d45f
commit 93006c7
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 3 deletions.
diff --git a/mock/demo/table-demo.ts b/mock/demo/table-demo.ts
@@ -18,6 +18,8 @@ const demoList = (() => {
       name6: '@cname()',
       name7: '@cname()',
       name8: '@cname()',
+      date: `@date('yyyy-MM-dd')`,
+      time: `@time('HH:mm')`,
       'no|100000-10000000': 100000,
       'status|1': ['normal', 'enable', 'disable'],
     });

diff --git a/src/components/Table/src/componentMap.ts b/src/components/Table/src/componentMap.ts
@@ -1,6 +1,14 @@
 import type { Component } from 'vue';
 
-import { Input, Select, Checkbox, InputNumber, Switch } from 'ant-design-vue';
+import {
+  Input,
+  Select,
+  Checkbox,
+  InputNumber,
+  Switch,
+  DatePicker,
+  TimePicker,
+} from 'ant-design-vue';
 
 import type { ComponentType } from './types/componentType';
 import { ApiSelect } from '/@/components/Form';
@@ -14,6 +22,8 @@ componentMap.set('Select', Select);
 componentMap.set('ApiSelect', ApiSelect);
 componentMap.set('Switch', Switch);
 componentMap.set('Checkbox', Checkbox);
+componentMap.set('DatePicker', DatePicker);
+componentMap.set('TimePicker', TimePicker);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

diff --git a/src/components/Table/src/components/editable/helper.ts b/src/components/Table/src/components/editable/helper.ts
@@ -18,7 +18,9 @@ export function createPlaceholderMessage(component: ComponentType) {
     component.includes('Select') ||
     component.includes('Checkbox') ||
     component.includes('Radio') ||
-    component.includes('Switch')
+    component.includes('Switch') ||
+    component.includes('DatePicker') ||
+    component.includes('TimePicker')
   ) {
     return t('common.chooseText');
   }

diff --git a/src/components/Table/src/types/componentType.ts b/src/components/Table/src/types/componentType.ts
@@ -4,4 +4,6 @@ export type ComponentType =
   | 'Select'
   | 'ApiSelect'
   | 'Checkbox'
-  | 'Switch';
+  | 'Switch'
+  | 'DatePicker'
+  | 'TimePicker';
diff --git a/src/views/demo/table/EditCellTable.vue b/src/views/demo/table/EditCellTable.vue
@@ -87,6 +87,28 @@
       },
       width: 200,
     },
+    {
+      title: '日期选择',
+      dataIndex: 'date',
+      edit: true,
+      editComponent: 'DatePicker',
+      editComponentProps: {
+        valueFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD',
+      },
+      width: 200,
+    },
+    {
+      title: '时间选择',
+      dataIndex: 'time',
+      edit: true,
+      editComponent: 'TimePicker',
+      editComponentProps: {
+        valueFormat: 'HH:mm',
+        format: 'HH:mm',
+      },
+      width: 200,
+    },
     {
       title: '勾选框',
       dataIndex: 'name5',

diff --git a/src/views/demo/table/EditRowTable.vue b/src/views/demo/table/EditRowTable.vue
@@ -93,6 +93,38 @@
       },
       width: 200,
     },
+    {
+      title: '日期选择',
+      dataIndex: 'date',
+      editRow: true,
+      editComponent: 'DatePicker',
+      editComponentProps: {
+        valueFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD',
+      },
+      width: 200,
+    },
+    {
+      title: '时间选择',
+      dataIndex: 'time',
+      editRow: true,
+      editComponent: 'TimePicker',
+      editComponentProps: {
+        valueFormat: 'HH:mm',
+        format: 'HH:mm',
+      },
+      width: 200,
+    },
+    {
+      title: '远程下拉',
+      dataIndex: 'name4',
+      editRow: true,
+      editComponent: 'ApiSelect',
+      editComponentProps: {
+        api: optionsListApi,
+      },
+      width: 200,
+    },
     {
       title: '勾选框',
       dataIndex: 'name5',