Unverified 提交 93006c7d 作者: Netfan 提交者: GitHub

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

为表格的可编辑单元格添加日期选择框和时间选择框组件
上级 4f0d45f1
......@@ -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'],
});
......
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);
......
......@@ -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');
}
......
......@@ -4,4 +4,6 @@ export type ComponentType =
| 'Select'
| 'ApiSelect'
| 'Checkbox'
| 'Switch';
| 'Switch'
| 'DatePicker'
| 'TimePicker';
......@@ -88,6 +88,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',
edit: true,
......
......@@ -94,6 +94,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',
editRow: true,
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论