mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:48:13 +08:00
fix: CRUD开启超级表头时展开列显示错误，合并列元素只有1个时无法显示remark问题 (#5047)
This commit is contained in:
RUNZE LU
GitHub
parent
9b4ca145e9
commit
3e61bc482e
@ -1,8 +1,10 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
title: '支持表头分组，通过在 cloumn 上设置 groupName 实现。',
|
||||
body: [
|
||||
{
|
||||
type: 'crud',
|
||||
draggable: true,
|
||||
bulkActions: [
|
||||
{
|
||||
label: '批量删除',
|
||||
@ -33,117 +35,177 @@ export default {
|
||||
}
|
||||
}
|
||||
],
|
||||
data: {
|
||||
items: [
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 4.2',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'A',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 4.2',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'B',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'AOL browser (AOL desktop)',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'C',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'AOL browser (AOL desktop)',
|
||||
platform: 'Win 98',
|
||||
version: '3',
|
||||
grade: 'A',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'AOL browser (AOL desktop)',
|
||||
platform: 'Win 98',
|
||||
version: '4',
|
||||
grade: 'A',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 1.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '4',
|
||||
grade: 'A',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 1.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '5',
|
||||
grade: 'A',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 2.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '5',
|
||||
grade: 'B',
|
||||
id: 8
|
||||
},
|
||||
{
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 2.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '5',
|
||||
grade: 'C',
|
||||
id: 9
|
||||
},
|
||||
{
|
||||
engine: 'Gecko',
|
||||
browser: 'Firefox 2.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '5',
|
||||
grade: 'D',
|
||||
id: 10
|
||||
}
|
||||
]
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
name: 'id',
|
||||
label: 'ID',
|
||||
remark: 'ID',
|
||||
groupName: 'A'
|
||||
},
|
||||
{
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
remark: 'CSS grade',
|
||||
groupName: 'A'
|
||||
},
|
||||
{
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
remark: 'Rendering engine',
|
||||
groupName: 'A'
|
||||
},
|
||||
{
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
groupName: 'A'
|
||||
remark: 'Browser'
|
||||
},
|
||||
{
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
remark: 'Platform(s)',
|
||||
groupName: 'B'
|
||||
},
|
||||
{
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
remark: 'Engine version',
|
||||
groupName: 'B'
|
||||
}
|
||||
]
|
||||
],
|
||||
data: {
|
||||
items: [
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 4.0',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'X',
|
||||
id: 1,
|
||||
children: [
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 4.0',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'X',
|
||||
id: 1001
|
||||
},
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 5.0',
|
||||
platform: 'Win 95+',
|
||||
version: '5',
|
||||
grade: 'C',
|
||||
id: 1002
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 5.0',
|
||||
platform: 'Win 95+',
|
||||
version: '5',
|
||||
grade: 'C',
|
||||
id: 2,
|
||||
children: [
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 4.0',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'X',
|
||||
id: 2001
|
||||
},
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 5.0',
|
||||
platform: 'Win 95+',
|
||||
version: '5',
|
||||
grade: 'C',
|
||||
id: 2002
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 5.5',
|
||||
platform: 'Win 95+',
|
||||
version: '5.5',
|
||||
grade: 'A',
|
||||
id: 3,
|
||||
children: [
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 4.0',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'X',
|
||||
id: 3001
|
||||
},
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 5.0',
|
||||
platform: 'Win 95+',
|
||||
version: '5',
|
||||
grade: 'C',
|
||||
id: 3002
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 6',
|
||||
platform: 'Win 98+',
|
||||
version: '6',
|
||||
grade: 'A',
|
||||
id: 4,
|
||||
children: [
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 4.0',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'X',
|
||||
id: 4001
|
||||
},
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 5.0',
|
||||
platform: 'Win 95+',
|
||||
version: '5',
|
||||
grade: 'C',
|
||||
id: 4002
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 7',
|
||||
platform: 'Win XP SP2+',
|
||||
version: '7',
|
||||
grade: 'A',
|
||||
id: 5,
|
||||
children: [
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 4.0',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'X',
|
||||
id: 5001
|
||||
},
|
||||
{
|
||||
engine: 'Trident',
|
||||
browser: 'Internet Explorer 5.0',
|
||||
platform: 'Win 95+',
|
||||
version: '5',
|
||||
grade: 'C',
|
||||
id: 5002
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -484,10 +484,15 @@ export const TableStore = iRendererStore
|
||||
}
|
||||
|
||||
const groups: Array<{
|
||||
/** Group单元格显示名称，从1开始 */
|
||||
label: string;
|
||||
/** Group单元格包含的首列的索引值，范围[1, columns.length] */
|
||||
index: number;
|
||||
/** Group单元格包含列数 */
|
||||
colSpan: number;
|
||||
/** Group单元格包含行数 */
|
||||
rowSpan: number;
|
||||
/** Group单元格包含列信息 */
|
||||
has: Array<any>;
|
||||
}> = [
|
||||
{
|
||||
@ -519,7 +524,13 @@ export const TableStore = iRendererStore
|
||||
prev.has.push(current);
|
||||
} else {
|
||||
groups.push({
|
||||
label: current.groupName || current.label || ' ', // 如果中间没有配置groupName，那么样式会错乱，这里设置列的label配置，lable也没有则设置一个空字符串
|
||||
/**
|
||||
* 如果中间没有配置groupName，那么样式会错乱，这里设置列的label配置，lable也没有则设置一个空字符串
|
||||
* 注：内部列需要设置为undefined，保证rowSpan在下面计算为2
|
||||
*/
|
||||
label: !!~['__checkme', '__expandme'].indexOf(current.type)
|
||||
? undefined
|
||||
: current.groupName || current.label || ' ',
|
||||
colSpan: 1,
|
||||
rowSpan: 1,
|
||||
index: current.index,
|
||||
|
||||
@ -4599,43 +4599,67 @@ exports[`Renderer:table groupName-middleNoGroupName 1`] = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class=""
|
||||
colspan="1"
|
||||
data-index="3"
|
||||
rowspan="1"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
<div
|
||||
class="cxd-TableCell--title"
|
||||
>
|
||||
<span>
|
||||
分组1
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
Engine
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Table-content-colDragLine"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
colspan="1"
|
||||
data-index="4"
|
||||
rowspan="2"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
<div
|
||||
class="cxd-TableCell--title"
|
||||
>
|
||||
<span>
|
||||
Grade
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
Grade
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Table-content-colDragLine"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
colspan="1"
|
||||
data-index="5"
|
||||
rowspan="2"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
<div
|
||||
class="cxd-TableCell--title"
|
||||
>
|
||||
<span>
|
||||
Version
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
Version
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Table-content-colDragLine"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
colspan="2"
|
||||
@ -5540,43 +5564,67 @@ exports[`Renderer:table groupName-startNoGroupName 1`] = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class=""
|
||||
colspan="1"
|
||||
data-index="3"
|
||||
rowspan="2"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
<div
|
||||
class="cxd-TableCell--title"
|
||||
>
|
||||
<span>
|
||||
Engine
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
Engine
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Table-content-colDragLine"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
colspan="1"
|
||||
data-index="4"
|
||||
rowspan="2"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
<div
|
||||
class="cxd-TableCell--title"
|
||||
>
|
||||
<span>
|
||||
Grade
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
Grade
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Table-content-colDragLine"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
colspan="1"
|
||||
data-index="5"
|
||||
rowspan="2"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
<div
|
||||
class="cxd-TableCell--title"
|
||||
>
|
||||
<span>
|
||||
Version
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
Version
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Table-content-colDragLine"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
colspan="2"
|
||||
|
||||
@ -1,15 +1,19 @@
|
||||
import React from 'react';
|
||||
import {ClassNamesFn} from 'amis-core';
|
||||
import {ITableStore} from 'amis-core';
|
||||
import {SchemaNode, ActionObject} from 'amis-core';
|
||||
import {
|
||||
ClassNamesFn,
|
||||
ITableStore,
|
||||
SchemaNode,
|
||||
ActionObject,
|
||||
LocaleProps,
|
||||
OnEventProps
|
||||
} from 'amis-core';
|
||||
import {TableBody} from './TableBody';
|
||||
import {LocaleProps} from 'amis-core';
|
||||
import {observer} from 'mobx-react';
|
||||
import {ActionSchema} from '../Action';
|
||||
import ItemActionsWrapper from './ItemActionsWrapper';
|
||||
import {SchemaTpl} from '../../Schema';
|
||||
import {Icon} from 'amis-ui';
|
||||
import {OnEventProps} from 'amis-core';
|
||||
|
||||
import type {IColumn, IRow} from 'amis-core/lib/store/table';
|
||||
|
||||
export interface TableContentProps extends LocaleProps {
|
||||
@ -151,10 +155,15 @@ export class TableContent extends React.Component<TableContentProps> {
|
||||
{columnsGroup.length ? (
|
||||
<tr>
|
||||
{columnsGroup.map((item, index) =>
|
||||
item.has[0].type === '__checkme' ? (
|
||||
/**
|
||||
* 勾选列和展开列的表头单独成列
|
||||
* 如果分组列只有一个元素，也要执行表头合并
|
||||
*/
|
||||
!!~['__checkme', '__expandme'].indexOf(item.has[0].type) ||
|
||||
(item.has.length === 1 && !/^__/.test(item.has[0].type)) ? (
|
||||
renderHeadCell(item.has[0], {
|
||||
'data-index': item.has[0].index,
|
||||
'key': item.has[0].index,
|
||||
'key': index,
|
||||
'colSpan': item.colSpan,
|
||||
'rowSpan': item.rowSpan
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user