github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-24 10:33:50 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>
This commit is contained in:
Wit〆苗大 2022-10-20 06:57:56 +08:00 committed by GitHub
parent c37a15fefb
commit e08a155c40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 117 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
mock/demo/table-demo.ts
View File

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

6
src/components/Table/src/componentMap.ts
View File

@ -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);

4
src/components/Table/src/components/editable/EditableCell.vue
View File

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

5
src/components/Table/src/types/componentType.ts
View File

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

53
src/views/demo/table/EditCellTable.vue
View File

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

51
src/views/demo/table/EditRowTable.vue
View File

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