feat(EditableCell): table 可编辑单元格和可编辑行 增加 单选框相关组件, 并增加示例 (#2294)

Co-authored-by: N苗大 <caoshengmiao@hypergryph.com>

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),

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<ComponentType, Component>();
 
@@ -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);

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;
         }
 

src/components/Table/src/types/componentType.ts

@@ -8,4 +8,7 @@ export type ComponentType =
   | 'Checkbox'
   | 'Switch'
   | 'DatePicker'
-  | 'TimePicker';
+  | 'TimePicker'
+  | 'RadioGroup'
+  | 'RadioButtonGroup'
+  | 'ApiRadioGroup';

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 },

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 },