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

Wit〆苗大

2022-10-20 e08a155c40877bb44fce3e90672845058d3b12f9

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

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

 mock/demo/table-demo.ts

@@ -27,6 +27,9 @@
      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 @@
  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('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 @@
  | '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 },