diff --git a/mock/demo/table-demo.ts b/mock/demo/table-demo.ts index f3a0f16f..b450e3e9 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 3f724719..ace83f5e 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 90e5f9ac..cd0a4694 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 a683f1df..d71cc288 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 058da933..bb4764e5 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 128d9032..642ef29e 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 },