From e08a155c40877bb44fce3e90672845058d3b12f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wit=E3=80=86=E8=8B=97=E5=A4=A7?= Date: Thu, 20 Oct 2022 06:57:56 +0800 Subject: [PATCH] =?UTF-8?q?feat(EditableCell):=20table=20=E5=8F=AF?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=8D=95=E5=85=83=E6=A0=BC=E5=92=8C=E5=8F=AF?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E8=A1=8C=20=E5=A2=9E=E5=8A=A0=20=E5=8D=95?= =?UTF-8?q?=E9=80=89=E6=A1=86=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6,=20?= =?UTF-8?q?=E5=B9=B6=E5=A2=9E=E5=8A=A0=E7=A4=BA=E4=BE=8B=20(#2294)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 苗大 --- mock/demo/table-demo.ts | 3 ++ src/components/Table/src/componentMap.ts | 6 ++- .../src/components/editable/EditableCell.vue | 4 +- .../Table/src/types/componentType.ts | 5 +- src/views/demo/table/EditCellTable.vue | 53 ++++++++++++++++++- src/views/demo/table/EditRowTable.vue | 51 ++++++++++++++++++ 6 files changed, 117 insertions(+), 5 deletions(-) diff --git a/mock/demo/table-demo.ts b/mock/demo/table-demo.ts index f3a0f16fd..b450e3e98 100644 --- a/mock/demo/table-demo.ts +++ b/mock/demo/table-demo.ts @@ -27,6 +27,9 @@ const demoList = (() => { name6: '@cname()', name7: '@cname()', name8: '@cname()', + radio1: `选项${index + 1}`, + radio2: `选项${index + 1}`, + radio3: `选项${index + 1}`, avatar: Random.image('400x400', Random.color(), Random.color(), Random.first()), imgArr: getRandomPics(Math.ceil(Math.random() * 3) + 1), imgs: getRandomPics(Math.ceil(Math.random() * 3) + 1), diff --git a/src/components/Table/src/componentMap.ts b/src/components/Table/src/componentMap.ts index 3f7247190..ace83f5e5 100644 --- a/src/components/Table/src/componentMap.ts +++ b/src/components/Table/src/componentMap.ts @@ -8,9 +8,10 @@ import { DatePicker, TimePicker, AutoComplete, + Radio, } from 'ant-design-vue'; import type { ComponentType } from './types/componentType'; -import { ApiSelect, ApiTreeSelect } from '/@/components/Form'; +import { ApiSelect, ApiTreeSelect, RadioButtonGroup, ApiRadioGroup } from '/@/components/Form'; const componentMap = new Map(); @@ -24,6 +25,9 @@ componentMap.set('Switch', Switch); componentMap.set('Checkbox', Checkbox); componentMap.set('DatePicker', DatePicker); componentMap.set('TimePicker', TimePicker); +componentMap.set('RadioGroup', Radio.Group); +componentMap.set('RadioButtonGroup', RadioButtonGroup); +componentMap.set('ApiRadioGroup', ApiRadioGroup); export function add(compName: ComponentType, component: Component) { componentMap.set(compName, component); diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue index 90e5f9ac8..cd0a46947 100644 --- a/src/components/Table/src/components/editable/EditableCell.vue +++ b/src/components/Table/src/components/editable/EditableCell.vue @@ -14,7 +14,7 @@ import { propTypes } from '/@/utils/propTypes'; import { isArray, isBoolean, isFunction, isNumber, isString } from '/@/utils/is'; import { createPlaceholderMessage } from './helper'; - import { omit, pick, set } from 'lodash-es'; + import { pick, set } from 'lodash-es'; import { treeToList } from '/@/utils/helper/treeHelper'; import { Spin } from 'ant-design-vue'; @@ -122,7 +122,7 @@ } const component = unref(getComponent); - if (!component.includes('Select')) { + if (!component.includes('Select') && !component.includes('Radio')) { return value; } diff --git a/src/components/Table/src/types/componentType.ts b/src/components/Table/src/types/componentType.ts index a683f1dfd..d71cc288e 100644 --- a/src/components/Table/src/types/componentType.ts +++ b/src/components/Table/src/types/componentType.ts @@ -8,4 +8,7 @@ export type ComponentType = | 'Checkbox' | 'Switch' | 'DatePicker' - | 'TimePicker'; + | 'TimePicker' + | 'RadioGroup' + | 'RadioButtonGroup' + | 'ApiRadioGroup'; diff --git a/src/views/demo/table/EditCellTable.vue b/src/views/demo/table/EditCellTable.vue index 058da933f..bb4764e53 100644 --- a/src/views/demo/table/EditCellTable.vue +++ b/src/views/demo/table/EditCellTable.vue @@ -105,7 +105,7 @@ }, { title: '远程下拉树', - dataIndex: 'name71', + dataIndex: 'name8', edit: true, editComponent: 'ApiTreeSelect', editRule: false, @@ -157,6 +157,57 @@ }, width: 200, }, + { + title: '单选框', + dataIndex: 'radio1', + edit: true, + editComponent: 'RadioGroup', + editComponentProps: { + options: [ + { + label: '选项1', + value: '1', + }, + { + label: '选项2', + value: '2', + }, + ], + }, + width: 200, + }, + { + title: '单选按钮框', + dataIndex: 'radio2', + edit: true, + editComponent: 'RadioButtonGroup', + editComponentProps: { + options: [ + { + label: '选项1', + value: '1', + }, + { + label: '选项2', + value: '2', + }, + ], + }, + width: 200, + }, + { + title: '远程单选框', + dataIndex: 'radio3', + edit: true, + editComponent: 'ApiRadioGroup', + editComponentProps: { + api: optionsListApi, + resultField: 'list', + labelField: 'name', + valueField: 'id', + }, + width: 200, + }, ]; export default defineComponent({ components: { BasicTable }, diff --git a/src/views/demo/table/EditRowTable.vue b/src/views/demo/table/EditRowTable.vue index 128d90329..642ef29e5 100644 --- a/src/views/demo/table/EditRowTable.vue +++ b/src/views/demo/table/EditRowTable.vue @@ -162,6 +162,57 @@ }, width: 100, }, + { + title: '单选框', + dataIndex: 'radio1', + editRow: true, + editComponent: 'RadioGroup', + editComponentProps: { + options: [ + { + label: '选项1', + value: '1', + }, + { + label: '选项2', + value: '2', + }, + ], + }, + width: 200, + }, + { + title: '单选按钮框', + dataIndex: 'radio2', + editRow: true, + editComponent: 'RadioButtonGroup', + editComponentProps: { + options: [ + { + label: '选项1', + value: '1', + }, + { + label: '选项2', + value: '2', + }, + ], + }, + width: 200, + }, + { + title: '远程单选框', + dataIndex: 'radio3', + editRow: true, + editComponent: 'ApiRadioGroup', + editComponentProps: { + api: optionsListApi, + resultField: 'list', + labelField: 'name', + valueField: 'id', + }, + width: 200, + }, ]; export default defineComponent({ components: { BasicTable, TableAction },