diff --git a/docs/zh-CN/components/table.md b/docs/zh-CN/components/table.md index cf758540a..340de77b5 100755 --- a/docs/zh-CN/components/table.md +++ b/docs/zh-CN/components/table.md @@ -1817,34 +1817,35 @@ popOver 的其它配置请参考 [popover](./popover) ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | 版本 | -| ---------------- | -------------------------------------------------------- | ------------------------- | ------------------------------------------------------------------------- | --------------------------------- | -| type | `string` | | `"type"` 指定为 table 渲染器 | | -| title | `string` | | 标题 | | -| source | `string` | `${items}` | 数据源, 绑定当前环境变量 | | -| affixHeader | `boolean` | `true` | 是否固定表头 | | -| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 | | -| placeholder | `string` 或者 `SchemaTpl` | `暂无数据` | 当没数据的时候的文字提示 | | -| className | `string` | `panel-default` | 外层 CSS 类名 | | -| tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 | | -| headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 | | -| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 | | -| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 | | -| columns | `Array` | | 用来设置列信息 | | -| combineNum | `number` | | 自动合并单元格 | | -| itemActions | Array<[Action](./action-button)> | | 悬浮行操作按钮组 | | -| itemCheckableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可勾选的条件，要用 [表达式](../../docs/concepts/expression) | | -| itemDraggableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可拖拽的条件，要用 [表达式](../../docs/concepts/expression) | | -| checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 | | -| rowClassName | `string` | | 给行添加 CSS 类名 | | -| rowClassNameExpr | [模板](../../docs/concepts/template) | | 通过模板给行添加 CSS 类名 | | -| prefixRow | `Array` | | 顶部总结行 | | -| affixRow | `Array` | | 底部总结行 | | -| itemBadge | [`BadgeSchema`](./badge) | | 行角标配置 | | -| autoFillHeight | `boolean` 丨 `{height: number}` 丨 `{maxHeight: number}` | | 内容区域自适应高度，可选择自适应、固定高度和最大高度 | `maxHeight` 需要 `2.8.0` 以上版本 | -| resizable | `boolean` | `true` | 列宽度是否支持调整 | | -| selectable | `boolean` | `false` | 支持勾选 | | -| multiple | `boolean` | `false` | 勾选 icon 是否为多选样式`checkbox`， 默认为`radio` | | +| 属性名 | 类型 | 默认值 | 说明 | 版本 | +| ---------------- | -------------------------------------------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------- | --------------------------------- | +| type | `string` | | `"type"` 指定为 table 渲染器 | | +| title | `string` | | 标题 | | +| source | `string` | `${items}` | 数据源, 绑定当前环境变量 | | +| tableLayout | `fixed` \| `auto` | `auto` | 表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局，当尝试修改列宽度时，自动转成 fixed 模式 | | +| affixHeader | `boolean` | `true` | 是否固定表头 | | +| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 | | +| placeholder | `string` 或者 `SchemaTpl` | `暂无数据` | 当没数据的时候的文字提示 | | +| className | `string` | `panel-default` | 外层 CSS 类名 | | +| tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 | | +| headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 | | +| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 | | +| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 | | +| columns | `Array` | | 用来设置列信息 | | +| combineNum | `number` | | 自动合并单元格 | | +| itemActions | Array<[Action](./action-button)> | | 悬浮行操作按钮组 | | +| itemCheckableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可勾选的条件，要用 [表达式](../../docs/concepts/expression) | | +| itemDraggableOn | [表达式](../../docs/concepts/expression) | | 配置当前行是否可拖拽的条件，要用 [表达式](../../docs/concepts/expression) | | +| checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 | | +| rowClassName | `string` | | 给行添加 CSS 类名 | | +| rowClassNameExpr | [模板](../../docs/concepts/template) | | 通过模板给行添加 CSS 类名 | | +| prefixRow | `Array` | | 顶部总结行 | | +| affixRow | `Array` | | 底部总结行 | | +| itemBadge | [`BadgeSchema`](./badge) | | 行角标配置 | | +| autoFillHeight | `boolean` 丨 `{height: number}` 丨 `{maxHeight: number}` | | 内容区域自适应高度，可选择自适应、固定高度和最大高度 | `maxHeight` 需要 `2.8.0` 以上版本 | +| resizable | `boolean` | `true` | 列宽度是否支持调整 | | +| selectable | `boolean` | `false` | 支持勾选 | | +| multiple | `boolean` | `false` | 勾选 icon 是否为多选样式`checkbox`， 默认为`radio` | | ### 列配置属性表 diff --git a/examples/components/CRUD/Aside.jsx b/examples/components/CRUD/Aside.jsx index 66de7e63b..39634b2e0 100644 --- a/examples/components/CRUD/Aside.jsx +++ b/examples/components/CRUD/Aside.jsx @@ -169,7 +169,7 @@ export default { { name: 'id', label: 'ID', - width: 20, + width: 30, sortable: true, type: 'text', toggled: true diff --git a/examples/components/CRUD/Aside2.jsx b/examples/components/CRUD/Aside2.jsx index ba5c36ab9..7b14c2f6b 100644 --- a/examples/components/CRUD/Aside2.jsx +++ b/examples/components/CRUD/Aside2.jsx @@ -78,7 +78,7 @@ export default { { name: 'id', label: 'ID', - width: 20, + width: 30, sortable: true, type: 'text', toggled: true diff --git a/examples/components/CRUD/Fields.jsx b/examples/components/CRUD/Fields.jsx index ec9340d5b..4d4bc9f46 100644 --- a/examples/components/CRUD/Fields.jsx +++ b/examples/components/CRUD/Fields.jsx @@ -76,6 +76,7 @@ export default { type: 'list', label: 'List', placeholder: '-', + width: 400, size: 'sm', listItem: { title: '${title}', @@ -85,6 +86,7 @@ export default { { name: 'json', + width: 200, type: 'json', label: 'Json' } diff --git a/examples/components/CRUD/Fix.jsx b/examples/components/CRUD/Fix.jsx index 21cf28a5a..b00ea5fc9 100644 --- a/examples/components/CRUD/Fix.jsx +++ b/examples/components/CRUD/Fix.jsx @@ -141,7 +141,7 @@ const table = { { name: 'id', label: 'ID', - width: 20, + width: 30, sortable: true, type: 'text', toggled: true, diff --git a/examples/components/CRUD/Footable.jsx b/examples/components/CRUD/Footable.jsx index 6af50821b..0672dfae3 100644 --- a/examples/components/CRUD/Footable.jsx +++ b/examples/components/CRUD/Footable.jsx @@ -12,7 +12,7 @@ export default { { name: 'id', label: 'ID', - width: 20, + width: 30, sortable: true, type: 'text', toggled: true diff --git a/examples/components/CRUD/HeaderGroup.jsx b/examples/components/CRUD/HeaderGroup.jsx index aae56a32d..30ced694d 100644 --- a/examples/components/CRUD/HeaderGroup.jsx +++ b/examples/components/CRUD/HeaderGroup.jsx @@ -54,7 +54,8 @@ export default { name: 'engine', label: 'Rendering engine', remark: 'Rendering engine', - groupName: 'A' + groupName: 'A', + fixed: 'left' }, { name: 'browser', @@ -65,7 +66,8 @@ export default { name: 'platform', label: 'Platform(s)', remark: 'Platform(s)', - groupName: 'B' + groupName: 'B', + fixed: 'right' }, { name: 'version', diff --git a/examples/components/CRUD/ItemAction.jsx b/examples/components/CRUD/ItemAction.jsx index 81cd9b059..8600012fd 100644 --- a/examples/components/CRUD/ItemAction.jsx +++ b/examples/components/CRUD/ItemAction.jsx @@ -20,7 +20,7 @@ export default { { name: 'id', label: 'ID', - width: 20, + width: 30, type: 'text' }, { diff --git a/examples/components/CRUD/JumpNext.jsx b/examples/components/CRUD/JumpNext.jsx index 3f6a3ad36..c6129150c 100644 --- a/examples/components/CRUD/JumpNext.jsx +++ b/examples/components/CRUD/JumpNext.jsx @@ -10,7 +10,7 @@ export default { { name: 'id', label: 'ID', - width: 20, + width: 30, type: 'text', toggled: true }, diff --git a/examples/components/CRUD/Keyboards.jsx b/examples/components/CRUD/Keyboards.jsx index bbb63f8ef..4376568eb 100644 --- a/examples/components/CRUD/Keyboards.jsx +++ b/examples/components/CRUD/Keyboards.jsx @@ -5,8 +5,7 @@ export default { { type: 'plain', className: 'text-danger', - text: - '请通过上下左右键切换单元格，按 `Space` 键进入编辑模式，按 `Enter` 提交编辑，并最后点左上角的全部保存完成操作。' + text: '请通过上下左右键切换单元格，按 `Space` 键进入编辑模式，按 `Enter` 提交编辑，并最后点左上角的全部保存完成操作。' }, { type: 'crud', @@ -18,7 +17,7 @@ export default { { name: 'id', label: 'ID', - width: 20, + width: 30, sortable: true, type: 'text', toggled: true diff --git a/examples/components/CRUD/List.jsx b/examples/components/CRUD/List.jsx index 99f977824..15d65c389 100644 --- a/examples/components/CRUD/List.jsx +++ b/examples/components/CRUD/List.jsx @@ -29,6 +29,7 @@ export default { } ] }, + affixHeader: true, bulkActions: [ { label: '批量删除', @@ -115,8 +116,7 @@ export default { }, { type: 'html', - html: - '

添加其他 Html 片段 需要支持变量替换（todo）.

' + html: '

添加其他 Html 片段 需要支持变量替换（todo）.

' } ] } diff --git a/examples/components/CRUD/PopOver.tsx b/examples/components/CRUD/PopOver.tsx index 778f6b58d..5b0d9684e 100644 --- a/examples/components/CRUD/PopOver.tsx +++ b/examples/components/CRUD/PopOver.tsx @@ -9,7 +9,7 @@ export default { { name: 'id', label: 'ID', - width: 20, + width: 30, type: 'text' }, { diff --git a/examples/components/CRUD/Table.jsx b/examples/components/CRUD/Table.jsx index 0ae10d2fa..6b6178d60 100644 --- a/examples/components/CRUD/Table.jsx +++ b/examples/components/CRUD/Table.jsx @@ -70,6 +70,7 @@ export default { labelTpl: '${id} ${engine}', orderBy: 'id', orderDir: 'asc', + // affixHeader: false, filter: { title: '条件搜索', submitText: '', diff --git a/examples/components/SchemaRender.jsx b/examples/components/SchemaRender.jsx index 01f151d4d..dbb050bbf 100644 --- a/examples/components/SchemaRender.jsx +++ b/examples/components/SchemaRender.jsx @@ -152,6 +152,7 @@ export default function (schema, schemaProps, showCode, envOverrides) { tracker(eventTrack) { console.debug('eventTrack', eventTrack); }, + affixOffsetTop: 50, ...envOverrides }; diff --git a/mock/cfc/mock/service/schema.js b/mock/cfc/mock/service/schema.js index 8ce42e032..d49822f86 100755 --- a/mock/cfc/mock/service/schema.js +++ b/mock/cfc/mock/service/schema.js @@ -61,7 +61,7 @@ const predefined = { { name: 'id', label: 'ID', - width: 20, + width: 30, sortable: true, type: 'text', toggled: true diff --git a/packages/amis-core/src/store/crud.ts b/packages/amis-core/src/store/crud.ts index a2028c96e..6df5f8a21 100644 --- a/packages/amis-core/src/store/crud.ts +++ b/packages/amis-core/src/store/crud.ts @@ -55,6 +55,21 @@ export const CRUDStore = ServiceStore.named('CRUDStore') }); }, + get toolbarData() { + // 包两层，主要是为了处理以下 case + // 里面放了个 form，form 提交过来的时候不希望把 items 这些发送过来。 + // 因为会把数据呈现在地址栏上。 + return createObject( + createObject(self.data, { + ...self.query, + items: self.items.concat(), + selectedItems: self.selectedItems.concat(), + unSelectedItems: self.unSelectedItems.concat() + }), + {} + ); + }, + get mergedData() { return extendObject(self.data, { ...self.query, diff --git a/packages/amis-core/src/store/table.ts b/packages/amis-core/src/store/table.ts index 09d4be3f6..3b07a4627 100644 --- a/packages/amis-core/src/store/table.ts +++ b/packages/amis-core/src/store/table.ts @@ -45,6 +45,7 @@ export const Column = types type: types.optional(types.string, 'plain'), name: types.maybe(types.string), value: types.frozen(), + id: '', groupName: '', toggled: false, toggable: true, @@ -58,6 +59,7 @@ export const Column = types fixed: '', index: 0, rawIndex: 0, + width: 0, breakpoint: types.optional(types.frozen(), undefined), pristine: types.optional(types.frozen(), undefined), remark: types.optional(types.frozen(), undefined), @@ -84,6 +86,10 @@ export const Column = types const table = getParent(self, 2) as ITableStore; table.persistSaveToggledColumns(); + }, + + setWidth(value: number) { + self.width = value; } })); @@ -350,6 +356,7 @@ export const TableStore = iRendererStore formsRef: types.optional(types.array(types.frozen()), []), maxKeepItemSelectionLength: Infinity, keepItemSelectionOnPageChange: false, + useFixedLayout: false, // 默认 table-layout 为 auto，主要这种方式下宽度设置不准确 // 导出 Excel 按钮的 loading 状态 exportExcelLoading: false, searchFormExpanded: false // 用来控制搜索框是否展开了，那个自动根据 searchable 生成的表单 autoGenerateFilter @@ -425,31 +432,6 @@ export const TableStore = iRendererStore ); } - function getLeftFixedColumns() { - if (self.dragging) { - return []; - } - - let columns = getFilteredColumns().filter(item => item.fixed === 'left'); - - // 有才带过去，没有就不带了 - if (columns.length) { - columns = getFilteredColumns().filter( - item => item.fixed === 'left' || /^__/.test(item.type) - ); - } - - return columns; - } - - function getRightFixedColumns() { - if (self.dragging) { - return []; - } - - return getFilteredColumns().filter(item => item.fixed === 'right'); - } - function isSelected(row: IRow): boolean { return !!~self.selectedRows.indexOf(row); } @@ -597,10 +579,17 @@ export const TableStore = iRendererStore (item.has.length === 1 && item.label === item.has[0].label) ? 2 : 1; + return { ...item, rowSpan, - label: rowSpan === 2 ? item.label || item.has[0].label : item.label + label: rowSpan === 2 ? item.label || item.has[0].label : item.label, + fixed: item.has.every(column => column.fixed) + ? item.has[0].fixed + : undefined, + get width() { + return item.has.reduce((a, b) => a + b.width, 0); + } }; }); } @@ -647,14 +636,6 @@ export const TableStore = iRendererStore return getFootableColumns(); }, - get leftFixedColumns() { - return getLeftFixedColumns(); - }, - - get rightFixedColumns() { - return getRightFixedColumns(); - }, - get toggableColumns() { return getToggableColumns(); }, @@ -771,11 +752,77 @@ export const TableStore = iRendererStore }); return list; + }, + + get columnWidthReady() { + return getFilteredColumns().every(column => column.width); + }, + + getStickyStyles(column: IColumn, columns: Array) { + let stickyClassName = ''; + const style: any = {}; + const autoFixLeftColumns = ['__checkme', '__dragme', '__expandme']; + + if ( + column.fixed === 'left' || + autoFixLeftColumns.includes(column.type) + ) { + stickyClassName = 'is-sticky is-sticky-left'; + let index = columns.indexOf(column) - 1; + + if ( + columns + .slice(index + 2) + .every( + col => + !( + (col && col.fixed === 'left') || + autoFixLeftColumns.includes(col.type) + ) + ) + ) { + stickyClassName += ' is-sticky-last-left'; + } + + let left = 0; + while (index >= 0) { + const col = columns[index]; + if ( + (col && col.fixed === 'left') || + autoFixLeftColumns.includes(col.type) + ) { + left += col.width; + } + index--; + } + style.left = left; + } else if (column.fixed === 'right') { + stickyClassName = 'is-sticky is-sticky-right'; + let right = 0; + let index = columns.indexOf(column) + 1; + + if (columns.slice(0, index - 1).every(col => col.fixed !== 'right')) { + stickyClassName += ' is-sticky-first-right'; + } + + const len = columns.length; + while (index < len) { + const col = columns[index]; + if (col && col.fixed === 'right') { + right += col.width; + } + index++; + } + style.right = right; + } + return [style, stickyClassName]; } }; }) .actions(self => { - function update(config: Partial) { + function update( + config: Partial & {tableLayout?: 'fixed' | 'auto'} + ) { config.primaryField !== void 0 && (self.primaryField = config.primaryField); config.selectable !== void 0 && (self.selectable = config.selectable); @@ -820,12 +867,6 @@ export const TableStore = iRendererStore let columns: Array = config.columns .filter(column => column) .concat(); - if (!columns.length) { - columns.push({ - type: 'text', - label: '空' - }); - } // 更新列顺序，afterCreate生命周期中更新columns不会触发组件的render const key = getPersistDataKey(columns); @@ -846,42 +887,11 @@ export const TableStore = iRendererStore } } - columns.unshift({ - type: '__expandme', - toggable: false, - className: 'Table-expandCell' - }); + updateColumns(columns); + } - columns.unshift({ - type: '__checkme', - fixed: 'left', - toggable: false, - className: 'Table-checkCell' - }); - - columns.unshift({ - type: '__dragme', - toggable: false, - className: 'Table-dragCell' - }); - - columns = columns.map((item, index) => ({ - ...item, - index, - rawIndex: index - PARTITION_INDEX, - type: item.type || 'plain', - pristine: item, - toggled: item.toggled !== false, - breakpoint: item.breakpoint, - isPrimary: index === PARTITION_INDEX, - className: item.className || '', - /** 提前映射变量，方便后续view中使用 */ - label: isPureVariable(item.label) - ? resolveVariableAndFilter(item.label, self.data) - : item.label - })); - - self.columns.replace(columns as any); + if (config.tableLayout === 'fixed') { + self.useFixedLayout = true; } } @@ -917,7 +927,9 @@ export const TableStore = iRendererStore columns = columns.map((item, index) => ({ ...item, + id: guid(), index, + width: 0, rawIndex: index - PARTITION_INDEX, type: item.type || 'plain', pristine: item.pristine || item, @@ -931,10 +943,16 @@ export const TableStore = iRendererStore })); self.columns.replace(columns as any); - persistSaveToggledColumns(); + // self.useFixedLayout = self.columns.some( + // column => column.pristine.width + // ); } } + function invalidTableColumnWidth() { + self.columns.forEach(column => column.setWidth(0)); + } + function combineCell(arr: Array, keys: Array): Array { if (!keys.length || !arr.length) { return arr; @@ -1130,6 +1148,7 @@ export const TableStore = iRendererStore } self.dragging = false; + invalidTableColumnWidth(); // 更新内容需要重新计算表格布局 } // 获取所有层级的子节点id @@ -1493,6 +1512,7 @@ export const TableStore = iRendererStore return { update, updateColumns, + invalidTableColumnWidth, initRows, updateSelected, toggleAll, @@ -1515,6 +1535,9 @@ export const TableStore = iRendererStore persistSaveToggledColumns, setSearchFormExpanded, toggleSearchFormExpanded, + setUseFixedLayout(value: any) { + self.useFixedLayout = !!value; + }, // events afterCreate() { diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index eeed4c09a..b637d5375 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -3970,9 +3970,9 @@ --Table-color: var(--table-body-color); --Table-expandBtn-color: var(--colors-neutral-text-5); --Table-fixed-zIndex: 5; - --Table-fixedLeft-boxShadow: 0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15); - --Table-fixedRight-boxShadow: -0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15); - --Table-fixedTop-boxShadow: var(--shadows-shadow-normal); + --Table-fixedLeft-boxShadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.06); + --Table-fixedRight-boxShadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.06); + --Table-fixedTop-boxShadow: inset 0 10px 8px -8px rgba(5, 5, 5, 0.06); --Table-fontSize: var(--table-body-fontSize); --Table-heading-bg: var(--table-title-bg-color); --Table-heading-height: #{px2rem(40px)}; diff --git a/packages/amis-ui/scss/components/_cards.scss b/packages/amis-ui/scss/components/_cards.scss index ba22ac33d..8093ca268 100644 --- a/packages/amis-ui/scss/components/_cards.scss +++ b/packages/amis-ui/scss/components/_cards.scss @@ -31,18 +31,11 @@ } &-fixedTop { - position: absolute; + position: sticky; background: var(--white); - z-index: -1; - opacity: 0; - box-shadow: var(--Cards-fixedTop-boxShadow); + // box-shadow: var(--Cards-fixedTop-boxShadow); padding: var(--gap-sm); - - &.in { - position: fixed; - opacity: 1; - z-index: $zindex-affix; - } + z-index: $zindex-sticky; .#{$ns}Cards-toolbar { margin-bottom: 0; diff --git a/packages/amis-ui/scss/components/_list.scss b/packages/amis-ui/scss/components/_list.scss index 478459606..3fdaf0dc7 100644 --- a/packages/amis-ui/scss/components/_list.scss +++ b/packages/amis-ui/scss/components/_list.scss @@ -42,19 +42,12 @@ } &-fixedTop { - position: absolute; + position: sticky; background: var(--white); - z-index: -1; - opacity: 0; - box-shadow: var(--List-fixedTop-boxShadow); + z-index: $zindex-sticky; + // box-shadow: var(--List-fixedTop-boxShadow); // padding: var(--gap-sm); - &.in { - position: fixed; - opacity: 1; - z-index: $zindex-affix; - } - .#{$ns}Cards-toolbar { margin-bottom: 0; } diff --git a/packages/amis-ui/scss/components/_progress.scss b/packages/amis-ui/scss/components/_progress.scss index 51d1f551f..d9345f513 100644 --- a/packages/amis-ui/scss/components/_progress.scss +++ b/packages/amis-ui/scss/components/_progress.scss @@ -3,6 +3,7 @@ align-items: center; color: var(--text-color); font-size: var(--fontSizeXs); + min-width: 50px; &-line { display: inline-block; width: 100%; @@ -49,7 +50,6 @@ transition: width var(--animation-duration) ease; border-radius: var(--Progress-borderRadius); - &.bg-info { background: var(--Progress-line-theme-color); } diff --git a/packages/amis-ui/scss/components/_table.scss b/packages/amis-ui/scss/components/_table.scss index 345d9c873..e5a4fb2ef 100644 --- a/packages/amis-ui/scss/components/_table.scss +++ b/packages/amis-ui/scss/components/_table.scss @@ -8,82 +8,24 @@ margin-bottom: var(--gap-sm); } - &-fixedLeft, - &-fixedRight { - position: absolute; - background: var(--Table-bg); - z-index: var(--Table-fixed-zIndex); - top: auto; - box-shadow: none; - - &--autoFillHeight { - & > table thead { - position: sticky; // 简单实现表头吸顶效果，不考虑 IE 11 不然太麻烦 - top: 0; - z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了 - } - } - } - - &-fixedLeft { - // 还是改成默认不显示，footable 展示的时候，配置 固定列还没修复 - left: 0; - top: -999999px; - - &.in { - box-shadow: var(--Table-fixedLeft-boxShadow); - top: auto; - } - - & > .#{$ns}Table-table { - > thead > tr > th:last-child, - > tbody > tr > td:last-child { - padding-right: var(--TableCell-paddingX); - } - - // > thead > tr > th:last-child { - // border-right: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor); - // } - } - } - - &-fixedRight { - // 还是改成默认不显示，footable 展示的时候，配置 固定列还没修复 - right: 0; - top: -999999px; - - &.in { - box-shadow: var(--Table-fixedRight-boxShadow); - top: auto; - } - - & > .#{$ns}Table-table { - > thead > tr > th:first-child, - > tbody > tr > td:first-child { - padding-left: var(--TableCell-paddingX); - } - - // > thead > tr > th:first-child { - // border-left: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor); - // } - } - } - &-fixedTop { - position: absolute; + position: sticky; background: var(--Table-bg); - z-index: -1; - opacity: 0; + display: block; + opacity: 1; + z-index: $zindex-sticky; &:after { content: ''; position: absolute; width: 100%; box-shadow: var(--Table-fixedTop-boxShadow); - z-index: 10; - height: 1px; - margin-top: -3px; + z-index: 30; + height: 30px; + top: 100%; + pointer-events: none; background-color: transparent; + margin-top: -2px; } // box-sizing: content-box; @@ -94,22 +36,11 @@ // box-sizing: border-box; // } - &.in { - position: fixed; - opacity: 1; - z-index: $zindex-affix; - } - - > .#{$ns}Table-fixedLeft, - > .#{$ns}Table-fixedRight { - z-index: $zindex-affix + 10; - // box-shadow: none; - background: transparent; - } + // &.in { + // // position: fixed; + // } &.is-fakeHide { - > .#{$ns}Table-fixedLeft, - > .#{$ns}Table-fixedRight, > .#{$ns}Table-wrapper { visibility: hidden; position: absolute; @@ -236,10 +167,6 @@ min-height: 0.01%; overflow-x: auto; transform: translateZ(0); - - th { - position: relative; - } } &-content-colDragLine { @@ -253,7 +180,8 @@ opacity: 0.5; z-index: $zindex-top; - &:hover { + &:hover, + &.is-resizing { background: var(--primary); } } @@ -266,12 +194,54 @@ color: var(--Table-color); background: var(--Table-bg); border-spacing: 0; - border-collapse: collapse; - border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor); + border-collapse: separate; & th, & td { text-align: left; + border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor); + + &.is-sticky { + position: sticky !important; + z-index: 20; + background: inherit; + } + + &.is-sticky-last-left:after { + position: absolute; + top: 0; + right: 0; + bottom: -1px; + width: 30px; + transform: translateX(100%); + transition: box-shadow 0.3s; + content: ''; + pointer-events: none; + } + + &.is-sticky-first-right:after { + position: absolute; + top: 0; + bottom: -1px; + left: 0; + width: 30px; + transform: translateX(-100%); + transition: box-shadow 0.3s; + content: ''; + pointer-events: none; + } + } + + &.table-fixed-left .is-sticky-last-left:after { + box-shadow: var(--Table-fixedLeft-boxShadow); + } + + &.table-fixed-right .is-sticky-first-right:after { + box-shadow: var(--Table-fixedRight-boxShadow); + } + + & th { + position: relative; } & th.text-center, @@ -290,6 +260,10 @@ padding-top: 0; } + &--affixHeader thead { + visibility: collapse; + } + &--withCombine { > thead > tr > th, > tbody > tr > td { @@ -304,7 +278,7 @@ // reset > tbody > tr { - @if $Table-strip-bg !=transparent { + @if $Table-strip-bg != transparent { &.#{$ns}Table-tr--odd { background: transparent; } @@ -331,8 +305,9 @@ } > thead > tr { + background: var(--Table-thead-bg); > th { - background: var(--Table-thead-bg); + background: inherit; padding: var(--TableCell-paddingY) var(--TableCell-paddingX); text-align: left; @@ -399,6 +374,7 @@ > tbody > tr { position: relative; + background: var(--Table-bg); & + tr { border-top: var(--Table-borderWidth) solid var(--Table-borderColor); @@ -415,6 +391,7 @@ color: var(--Table-thead-color); font-weight: var(--fontWeightNormal); white-space: nowrap; + border-right: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor); } @@ -533,51 +510,48 @@ } } + .#{$ns}Table-divider2 { + content: ''; + position: absolute; + height: px2rem(1px); + top: 50%; + width: px2rem(10px); + background: var(--Table-tree-borderColor); + } + + .#{$ns}Table-divider3 { + position: absolute; + width: px2rem(1px); + top: 0; + bottom: 0; + height: 100%; + background: var(--Table-tree-borderColor); + } + @for $i from 2 through 10 { tr.#{$ns}Table-tr--#{$i}th.is-expanded { .#{$ns}Table-expandCell:before { - right: px2rem(7px) + px2rem(-18px) * ($i - 1); + left: px2rem(23px) + px2rem(18px) * ($i - 1); } } tr.#{$ns}Table-tr--#{$i}th { .#{$ns}Table-expandBtn { position: relative; - right: -(px2rem(18px)) * ($i - 1); + left: px2rem(1px) + (px2rem(18px)) * ($i - 1); } - .#{$ns}Table-expandCell + td { - position: relative; + .#{$ns}Table-divider2 { + left: px2rem(5px) + (px2rem(18px)) * ($i - 1); + } - &::before { - content: ''; - position: absolute; - width: px2rem(1px); - top: 0; - bottom: 0; - left: px2rem(-8px) + px2rem(18px) * ($i - 2); - height: auto; - background: var(--Table-tree-borderColor); - } - - &::after { - content: ''; - position: absolute; - height: px2rem(1px); - top: 50%; - left: px2rem(-8px) + px2rem(18px) * ($i - 2); - width: px2rem(10px); - background: var(--Table-tree-borderColor); - } - - padding-left: px2rem(18px) * $i - px2rem(18px); + .#{$ns}Table-divider3 { + left: px2rem(5px) + (px2rem(18px)) * ($i - 1); } } - tr.#{$ns}Table-tr--#{$i}th.is-expandable { - .#{$ns}Table-expandCell + td { - padding-left: px2rem(18px) * ($i - 1); - } + tr.#{$ns}Table-tr--#{$i}th.is-last .#{$ns}Table-divider3 { + height: 50%; } tr.#{$ns}Table-tr--#{$i}th.is-last:not(.is-expanded) { @@ -636,7 +610,7 @@ bottom: 0; height: 100%; background: var(--Table-tree-borderColor); - right: px2rem(7px) + px2rem(-18px) * ($i - 1); + left: px2rem(23px) + px2rem(18px) * ($i - 1); } } } @@ -650,7 +624,7 @@ width: px2rem(1px); top: 50%; bottom: 0; - right: px2rem(7px); + left: px2rem(23px); height: auto; background: var(--Table-tree-borderColor); } @@ -985,14 +959,10 @@ > .#{$ns}Table-content table thead { position: sticky; // 简单实现表头吸顶效果，不考虑 IE 11 不然太麻烦 top: 0; - z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了 + z-index: 21; // 由于 badge 导致 tbody 里 tr 的 position: relative 了 } } - > .#{$ns}Table-fixedTop { - display: none; - } - > .#{$ns}Table-footToolbar { margin-bottom: 0; } diff --git a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap index d7e9e8e4a..e52d990aa 100644 --- a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap +++ b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap @@ -29,249 +29,9 @@ exports[`doAction:crud reload 1`] = `
-
-
-
- -
-
-
-
-
-
-
- - - - - - - - - - - - - - - -
-
- - - ID - - -
-
-
-
- - - Rendering engine - - -
-
-
-
- - - Browser - - -
-
-
-
- - - Platform(s) - - -
-
-
-
- - - Engine version - - -
-
-
-
- - - CSS grade - - -
-
-
-
- - - 操作 - - -
-
-
-