+
- Created with Pixso.
+ Created with Pixso.
-
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/theme-saas/src/svgs/pushpin.svg b/packages/theme-saas/src/svgs/pushpin.svg
index 64e38c2eba..1652550f0d 100644
--- a/packages/theme-saas/src/svgs/pushpin.svg
+++ b/packages/theme-saas/src/svgs/pushpin.svg
@@ -1,7 +1,14 @@
-
-
\ No newline at end of file
+
+
+ Created with Pixso.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/theme/src/grid/body.less b/packages/theme/src/grid/body.less
index 895293937f..ecf2cc17d1 100644
--- a/packages/theme/src/grid/body.less
+++ b/packages/theme/src/grid/body.less
@@ -21,6 +21,16 @@
.@{grid-prefix-cls}__fixed-right-body-wrapper {
overflow-y: auto;
overflow-x: auto;
+
+ &.no-data {
+ overflow-y: hidden;
+ display: flex;
+ flex-direction: column;
+
+ > .@{grid-prefix-cls}-body__y-space {
+ display: none;
+ }
+ }
}
// 鼠标配置项开启后，选中单元格的边框样式（position：absolute）
diff --git a/packages/theme/src/grid/header.less b/packages/theme/src/grid/header.less
index f28c187ba3..0c97568908 100644
--- a/packages/theme/src/grid/header.less
+++ b/packages/theme/src/grid/header.less
@@ -16,8 +16,6 @@
@grid-header-prefix-cls: ~'@{css-prefix}grid-header';
@grid-cell-prefix-cls: ~'@{css-prefix}grid-cell';
@grid-checkbox-prefix-cls: ~'@{css-prefix}grid-checkbox';
-@header-suffix: ~'@{grid-prefix-cls}-cell__header-suffix';
-@cell-tooltip: ~'@{grid-prefix-cls}-cell__tooltip';
.@{grid-prefix-cls}__header-wrapper {
background-color: var(--tv-Grid-header-bg-color);
diff --git a/packages/theme/src/grid/table.less b/packages/theme/src/grid/table.less
index 64f55a6c43..2ee12af0a3 100644
--- a/packages/theme/src/grid/table.less
+++ b/packages/theme/src/grid/table.less
@@ -19,6 +19,7 @@
@input-prefix-cls: ~'@{css-prefix}input';
@select-prefix-cls: ~'@{css-prefix}select';
@pager-prefix-cls: ~'@{css-prefix}pager';
+@header-suffix: ~'@{grid-prefix-cls}-cell__header-suffix';
// table
.@{grid-prefix-cls} {
@@ -312,11 +313,8 @@
.@{grid-prefix-cls}-header__column,
.@{grid-prefix-cls}-body__column,
.@{grid-prefix-cls}-footer__column {
- background-image: linear-gradient(
- -90deg,
- var(--tv-Grid-border-color-divider),
- var(--tv-Grid-border-color-divider)
- ),
+ background-image:
+ linear-gradient(-90deg, var(--tv-Grid-border-color-divider), var(--tv-Grid-border-color-divider)),
linear-gradient(-180deg, var(--tv-Grid-border-color-divider), var(--tv-Grid-border-color-divider));
background-repeat: no-repeat;
background-size:
@@ -340,7 +338,7 @@
top: 0;
width: 0;
height: 100%;
- z-index: 1;
+ z-index: 10;
}
&:before {
@@ -604,8 +602,7 @@
& &-body__x-space {
width: 100%;
- height: 1px;
- margin-bottom: -1px;
+ height: 0;
}
& &-body__y-space {
@@ -722,38 +719,16 @@
// 暂无数据
& &__empty-block {
- display: none;
- opacity: 0;
height: 100%;
min-height: 60px;
padding: 60px 0;
- justify-content: center;
- align-items: center;
- text-align: center;
-
- &.is__visible {
- display: flex;
- flex-flow: column wrap;
- opacity: 1;
- &.is__center {
- opacity: 0;
- }
- }
- }
-
- .empty-center-block {
- z-index: 1;
display: flex;
- flex-direction: column;
+ align-items: center;
justify-content: center;
- text-align: center;
- position: absolute;
- width: 100%;
- height: calc(100% - 60px);
-
- .@{grid-prefix-cls}__empty-text {
- width: 100%;
- }
+ position: sticky;
+ left: 0;
+ flex: auto;
+ flex-direction: column;
}
// 表格无数据背景图
@@ -766,7 +741,8 @@
& &__empty-text {
display: block;
margin-top: 8px;
- width: 50%;
+ text-align: center;
+ width: 100%;
}
// 校验不通过
@@ -879,15 +855,16 @@
& &__body-wrapper {
&.body__wrapper.is__scrollload {
overflow-y: hidden;
- position: static;
}
}
& .is__scrollload &-body__y-space {
position: absolute;
right: 0;
+ bottom: 0;
width: 12px;
overflow-y: scroll;
+ z-index: 20;
.@{grid-prefix-cls}-body__y-scrollbar {
width: 1px;
@@ -1197,7 +1174,8 @@
transform: translateY(-50%);
width: 8px;
height: 14px;
- background-image: linear-gradient(
+ background-image:
+ linear-gradient(
180deg,
var(--row-drop-handle-bgcolor) 0 2px,
transparent 2px 6px,
@@ -1227,6 +1205,59 @@
}
}
}
+
+ .@{grid-prefix-cls}__body {
+ .tiny-grid-header__column {
+ background-color: var(--tv-Grid-header-bg-color);
+ position: sticky;
+ }
+
+ .tiny-grid-header__column:last-child {
+ contain: layout;
+ }
+
+ .tiny-grid-header__column .tiny-grid-thead-partition,
+ .tiny-grid-header__column .tiny-grid-resizable {
+ transform: translateX(calc(50% - 1px));
+ }
+
+ .tiny-grid-custom-footer {
+ width: 100%;
+ position: sticky;
+ bottom: 0;
+ }
+
+ .tiny-grid-footer__column {
+ position: sticky;
+ background-color: var(--tv-Grid-bg-color);
+ }
+
+ .@{grid-prefix-cls}-cell-text {
+ font-weight: var(--tv-Grid-header-font-weight);
+ }
+ .@{header-suffix} {
+ position: relative;
+ min-height: 16px;
+
+ .suffix-icon-1 {
+ position: absolute;
+ right: 12px;
+ }
+
+ .suffix-icon-0 {
+ position: absolute;
+ right: 0;
+ }
+ }
+ }
+
+ .sticky-wrapper {
+ position: sticky;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ height: 100%;
+ }
}
// 表格全屏样式
diff --git a/packages/theme/src/svgs/delegated-processing.svg b/packages/theme/src/svgs/delegated-processing.svg
new file mode 100644
index 0000000000..5cb83e86d5
--- /dev/null
+++ b/packages/theme/src/svgs/delegated-processing.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/packages/vue-icon-saas/index.ts b/packages/vue-icon-saas/index.ts
index dc7b2cca99..f0677fd0ec 100644
--- a/packages/vue-icon-saas/index.ts
+++ b/packages/vue-icon-saas/index.ts
@@ -90,6 +90,7 @@ import IconDeltaLeftO from './src/delta-left-o'
import IconDeltaLeft from './src/delta-left'
import IconDeltaRightO from './src/delta-right-o'
import IconDeltaRight from './src/delta-right'
+import IconDelegatedProcessing from './src/delegated-processing'
import IconDeltaUpO from './src/delta-up-o'
import IconDeltaUp from './src/delta-up'
import IconDerive from './src/derive'
@@ -857,6 +858,8 @@ export {
IconDeltaRightO as iconDeltaRightO,
IconDeltaRight,
IconDeltaRight as iconDeltaRight,
+ IconDelegatedProcessing,
+ IconDelegatedProcessing as iconDelegatedProcessing,
IconDeltaUpO,
IconDeltaUpO as iconDeltaUpO,
IconDeltaUp,
@@ -1740,6 +1743,7 @@ export default {
IconDeltaLeft,
IconDeltaRightO,
IconDeltaRight,
+ IconDelegatedProcessing,
IconDeltaUpO,
IconDeltaUp,
IconDerive,
diff --git a/packages/vue-icon/index.ts b/packages/vue-icon/index.ts
index dc7b2cca99..f0677fd0ec 100644
--- a/packages/vue-icon/index.ts
+++ b/packages/vue-icon/index.ts
@@ -90,6 +90,7 @@ import IconDeltaLeftO from './src/delta-left-o'
import IconDeltaLeft from './src/delta-left'
import IconDeltaRightO from './src/delta-right-o'
import IconDeltaRight from './src/delta-right'
+import IconDelegatedProcessing from './src/delegated-processing'
import IconDeltaUpO from './src/delta-up-o'
import IconDeltaUp from './src/delta-up'
import IconDerive from './src/derive'
@@ -857,6 +858,8 @@ export {
IconDeltaRightO as iconDeltaRightO,
IconDeltaRight,
IconDeltaRight as iconDeltaRight,
+ IconDelegatedProcessing,
+ IconDelegatedProcessing as iconDelegatedProcessing,
IconDeltaUpO,
IconDeltaUpO as iconDeltaUpO,
IconDeltaUp,
@@ -1740,6 +1743,7 @@ export default {
IconDeltaLeft,
IconDeltaRightO,
IconDeltaRight,
+ IconDelegatedProcessing,
IconDeltaUpO,
IconDeltaUp,
IconDerive,
diff --git a/packages/vue-icon/src/delegated-processing/index.ts b/packages/vue-icon/src/delegated-processing/index.ts
new file mode 100644
index 0000000000..a1143fd542
--- /dev/null
+++ b/packages/vue-icon/src/delegated-processing/index.ts
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { svg } from '@opentiny/vue-common'
+import DelegatedProcessing from '@opentiny/vue-theme/svgs/delegated-processing.svg'
+
+export default () => svg({ name: 'IconDelegatedProcessing', component: DelegatedProcessing })()
diff --git a/packages/vue/src/grid-toolbar/src/index.ts b/packages/vue/src/grid-toolbar/src/index.ts
index 3e43b1b197..96fb3e4987 100644
--- a/packages/vue/src/grid-toolbar/src/index.ts
+++ b/packages/vue/src/grid-toolbar/src/index.ts
@@ -555,7 +555,7 @@ export default defineComponent({
if (comp) {
const colWidth = this.loadColWidth()
- comp.reloadCustoms(customs, sort, colWidth).then((fullColumn) => {
+ comp.reloadCustoms(customs, sort, colWidth)?.then((fullColumn) => {
this.tableFullColumn = fullColumn
})
}
@@ -670,13 +670,7 @@ export default defineComponent({
if (this.$grid) {
if (columns && columns.length) {
const colWidth = this.loadColWidth()
- this.$grid.reloadCustoms(columns, sort, colWidth).then(() => {
- // 处理表格数据，否则列排序不生效
- this.$grid.handleTableData(true).then(() => {
- // 重新计算内部元素的位置
- this.$grid.recalculate()
- })
- })
+ this.$grid.reloadCustoms(columns, sort, colWidth)
}
if (isNumber(pageSize) && this.$grid.pagerConfig && this.$grid.pagerConfig.pageSize !== pageSize) {
diff --git a/packages/vue/src/grid/index.ts b/packages/vue/src/grid/index.ts
index d0799e53cc..3084806403 100644
--- a/packages/vue/src/grid/index.ts
+++ b/packages/vue/src/grid/index.ts
@@ -86,7 +86,7 @@ const getWrapFunc = (name) =>
function (...args) {
const tinyTable = this.$refs.tinyTable
if (tinyTable) {
- return this.$refs.tinyTable[name].apply(tinyTable, args)
+ return tinyTable[name]?.apply(tinyTable, args)
}
}
diff --git a/packages/vue/src/grid/src/adapter/src/renderer.ts b/packages/vue/src/grid/src/adapter/src/renderer.ts
index 776a7ea3bc..9d82d35881 100644
--- a/packages/vue/src/grid/src/adapter/src/renderer.ts
+++ b/packages/vue/src/grid/src/adapter/src/renderer.ts
@@ -22,8 +22,8 @@
* SOFTWARE.
*
*/
-import { set, assign, objectMap, get, each, isObject, isFunction } from '@opentiny/vue-renderless/grid/static/'
-import { getCellValue, setCellValue } from '@opentiny/vue-renderless/grid/utils'
+import { assign, objectMap, get, each, isObject, isFunction } from '@opentiny/vue-renderless/grid/static/'
+import { getCellValue, getRowid, setCellValue } from '@opentiny/vue-renderless/grid/utils'
import { hooks } from '@opentiny/vue-common'
function getAttrs({ name, attrs }, params) {
@@ -68,15 +68,18 @@ function getEvents(renderOpts, params, context) {
[type](event) {
let cellValue = native ? event.target.value : event
- if (!renderOpts.isValidAlways && isSyncCell(renderOpts, params, context)) {
- setCellValue(row, column, cellValue)
- } else {
- native || set(row, column.property, cellValue)
+ if (!isSyncCell(renderOpts, params, context)) {
model.update = true
model.value = cellValue
- $table.updateStatus(params, cellValue, renderOpts)
}
+ setCellValue(row, column, cellValue)
+
+ Promise.resolve().then(() => {
+ $table.updateStatus(params, cellValue, renderOpts)
+ })
+
+ // 对原生组件调用input和change回调
if (native) {
input && input.apply(null, [params].concat.apply(params, arguments))
change && change.apply(null, [params].concat.apply(params, arguments))
@@ -195,7 +198,10 @@ function defaultFilterMethod({ option, row, column }) {
}
function renderSelectEdit(h, renderOpts, params, context) {
+ const { column, $table, row } = params
+ const editorKey = `editor-${getRowid($table, row)}-${column.id}`
let props = {
+ ref: editorKey,
class: 'tiny-grid-default-select',
on: getEvents(renderOpts, params, context)
}
@@ -221,8 +227,12 @@ function defaultEditRender(h, renderOpts, params, context) {
let editorModel = component.model || {}
let modelProps = typeof component === 'string' ? 'value' : editorModel.prop || 'modelValue'
+ const editorKey = `editor-${getRowid($table, row)}-${column.id}`
+
+ // 获取行的唯一标识作为key
const key = row[$table.rowId]
let options = {
+ ref: editorKey,
key,
class: isTag ? `tiny-grid-default-${component}` : '',
attrs: {
diff --git a/packages/vue/src/grid/src/body/src/body.tsx b/packages/vue/src/grid/src/body/src/body.tsx
index 98bf54c949..8eff55dc31 100644
--- a/packages/vue/src/grid/src/body/src/body.tsx
+++ b/packages/vue/src/grid/src/body/src/body.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable unused-imports/no-unused-vars */
/**
* MIT License
*
@@ -24,494 +23,515 @@
*
*/
-import { isFunction, find } from '@opentiny/vue-renderless/grid/static/'
-import { isNull } from '@opentiny/utils'
+import { isFunction, find, isBoolean } from '@opentiny/vue-renderless/grid/static/'
+import { removeClass, addClass, isObject, throttle } from '@opentiny/utils'
import {
- updateCellTitle,
emitEvent,
getClass,
getFuncText,
getRowid,
- formatText
+ formatText,
+ getOffsetPos
} from '@opentiny/vue-renderless/grid/utils'
import { getCellLabel } from '../../tools'
import GlobalConfig from '../../config'
-import { iconChevronRight, iconChevronDown, iconGridNoData } from '@opentiny/vue-icon'
+import { iconGridNoData, iconChevronRight, iconChevronDown } from '@opentiny/vue-icon'
import { h, hooks, $prefix, defineComponent } from '@opentiny/vue-common'
-import { getTreeChildrenKey, getTreeShowKey, handleRowGroupFold, isVirtualRow } from '../../table/src/strategy'
-import { generateFixedClassName } from '../../table/src/utils/handleFixedColumn'
+import { handleRowGroupFold, isVirtualRow, getFixedStyle, getFixedClass } from '../../table/src/strategy'
+import { usePool } from './usePool'
+import { getConfigOverflow, useCellEvent, useCellSpan, useHeader } from '../../composable'
+
+const ChevronRight = iconChevronRight()
+const ChevronDown = iconChevronDown()
const GridNoData = iconGridNoData()
-// 滚动、拖动过程中不需要触发鼠标移入移出事件
-const isOperateMouse = ($table) =>
- $table._isResize || ($table.lastScrollTime && Date.now() < $table.lastScrollTime + $table.optimizeOpts.delayHover)
-
-let renderRowFlag = false
-
-// 解决静态扫描驼峰变量问题
-const classMap = {
- colEdit: 'col__edit',
- colIndex: 'col__index',
- colRadio: 'col__radio',
- colSelection: 'col__selection',
- colEllipsis: 'col__ellipsis',
- editVisible: 'edit__visible',
- fixedColumn: 'fixed__column',
- colDirty: 'col__dirty',
- colActived: 'col__actived',
- rowNew: 'row__new',
- rowSelected: 'row__selected',
- rowRadio: 'row__radio',
- rowActived: 'row__actived',
- isScrollload: 'is__scrollload'
-}
-const renderBorder = (h, type) => {
- let vnTop = h('span', {
- class: 'tiny-grid-border-top',
- ref: `${type}Top`
- })
- let vnRight = h('span', {
- class: 'tiny-grid-border-right',
- ref: `${type}Right`
- })
- let vnBottom = h('span', {
- class: 'tiny-grid-border-bottom',
- ref: `${type}Bottom`
- })
- let vnLeft = h('span', {
- class: 'tiny-grid-border-left',
- ref: `${type}Left`
- })
+let renderRowFlag = true
- return h(
- 'div',
- {
- class: `tiny-grid-${type}ed-borders`,
- ref: `${type}Borders`
- },
- [vnTop, vnRight, vnBottom, vnLeft]
+const renderBorder = (type) => {
+ return (
+
+
)
}
-function buildColumnProps(args) {
- const { attrs, cellAlign, cellClassName, className, column, columnActived, columnIndex, columnKey, editor } = args
- const { fixedHiddenColumn, hasEllipsis, isDirty, params, tdOns, validError, validated, columnStore } = args
-
- const { leftList, rightList } = columnStore
-
- return {
- class: [
- 'tiny-grid-body__column',
- column.id,
- {
- [`col__${cellAlign}`]: cellAlign,
- [classMap.colEdit]: editor,
- [classMap.colIndex]: column.type === 'index',
- [classMap.colRadio]: column.type === 'radio',
- [classMap.colSelection]: column.type === 'selection',
- [classMap.colEllipsis]: hasEllipsis,
- [classMap.editVisible]: editor && editor.type === 'visible',
- [classMap.fixedColumn]: fixedHiddenColumn,
- [classMap.colDirty]: isDirty,
- [classMap.colActived]: columnActived,
- 'col__valid-error': validError && validated,
- 'col__valid-success': columnActived ? !validError && !validated : isDirty && !validated,
- 'col__treenode': column.treeNode,
- 'fixed-left-last__column': column.fixed === 'left' && leftList[leftList.length - 1] === column,
- 'fixed-right-first__column': column.fixed === 'right' && rightList[0] === column
- },
- getClass(className, params),
- getClass(cellClassName, params)
- ],
- style: fixedHiddenColumn
- ? {
- left: `${column.style?.left}px`,
- right: `${column.style?.right}px`
- }
- : null,
- key: columnKey ? column.id : columnIndex,
- attrs,
- on: tdOns
- }
-}
+/** 渲染列 */
+function renderColumn({ $columnIndex, $table, _vm, column, id, row, rowid, seq, used }) {
+ const { align: allAlign, cellClassName, dropConfig = {}, editConfig, editRules, editStore } = $table
+ const { height, rowId, scrollXLoad, scrollYLoad, validOpts, validStore, validatedMap } = $table
+ const { normalRows } = _vm
+ const { attrs = { rowspan: 1, colspan: 1, visible: true }, params = { $table, row, column } } =
+ normalRows[rowid]?.[column.id] || {}
+ const { isMessageDefault, isMessageInline } = validOpts
+ const { actived } = editStore
+ const validated = validatedMap[column.id + '-' + row[rowId]]
+ const validError = validStore.row === row && validStore.column === column
+ const hasDefaultTip = editRules && (isMessageDefault ? height || !_vm.isNoData : isMessageInline)
+ const { align, className, editor } = column
-function buildColumnChildren(args) {
- let { h, hasDefaultTip, params, row, validError, column, $table } = args
- let { showEllipsis, showTip, showTitle, showTooltip, validStore } = args
- const dropConfig = args.dropConfig || {}
- const { validOpts } = $table
- let cellNode: any[] = []
- let validNode: any = null
- if (hasDefaultTip) {
- validNode = [null]
- if (validError) {
- validNode = h(
- 'div',
- {
- class: 'tiny-grid-cell__valid',
- style: validStore.rule && validStore.rule.width ? { width: `${validStore.rule.width}px` } : null
- },
- [
- validOpts?.icon ? h(validOpts.icon, { class: 'tiny-grid-cell__valid-icon' }) : null,
- h('span', { class: 'tiny-grid-cell__valid-msg', attrs: { title: validStore.content } }, validStore.content)
- ]
- )
- }
- }
- cellNode = [
- dropConfig.rowHandle === 'index' && column.type === 'index' ? h('div', { class: 'row__drop-handle' }) : null,
- h(
- 'div',
- {
- class: [
- 'tiny-grid-cell',
- {
- 'tiny-grid-cell__title': showTitle,
- 'tiny-grid-cell__tooltip': showTooltip || showTip,
- 'tiny-grid-cell__ellipsis': showEllipsis
- }
- ],
- attrs: { title: showTitle ? getCellLabel(row, column, params) : null }
- },
- // 调用column组件的renderCell渲染单元格内部的内容
- // 如果不是表格形态，就只保留表格结构（到tiny-grid-cell），不渲染具体的内容
- $table.isShapeTable ? column.renderCell(h, params) : null
- ),
- validNode
- ]
- return cellNode
-}
+ let cellAlign = align || allAlign
-function modifyCellAlign({ cellAlign, column }) {
- if (~['radio', 'selection', 'index'].indexOf(column.type)) {
+ // 索引列、选择列如果不配置对齐方式则默认为居中对齐
+ if (['radio', 'selection', 'index'].includes(column.type)) {
cellAlign = cellAlign || 'center'
}
- return cellAlign
-}
+ let { cellTip, cellOverflowTitle, cellOverflowTooltip, cellOverflowEllipsis, cellOverflowHint } = getConfigOverflow(
+ column,
+ $table
+ )
-function modifyShowEllipsis({ hasEllipsis, scrollXLoad, scrollYLoad, showEllipsis }) {
- if ((scrollXLoad || scrollYLoad) && !hasEllipsis) {
- showEllipsis = true
+ // 滚动的渲染不支持动态行高
+ if ((scrollXLoad || scrollYLoad) && !cellOverflowHint) {
+ cellOverflowEllipsis = true
}
- return showEllipsis
-}
-
-function addListenerMouseenter({ $table, evntParams, showTip, showTitle, showTooltip, tableListeners, tdOns }) {
- if (showTip || showTitle || showTooltip || tableListeners['cell-mouseenter']) {
- tdOns.mouseenter = (event) => {
- if (isOperateMouse($table)) {
- return
- }
-
- evntParams.cell = event.currentTarget
-
- if (showTitle) {
- updateCellTitle(event)
- } else if (showTip || showTooltip) {
- // 如果配置了显示 tooltip
- $table.triggerTooltipEvent(event, evntParams)
- }
+ const columnActived =
+ editConfig && editor && actived.row === row && (actived.column === column || editConfig.mode === 'row')
- emitEvent($table, 'cell-mouseenter', [evntParams, event])
- }
- }
+ // 如果显示状态
+ const isDirty = $table.getCellStatus(row, column).isDirty
+
+ params.$columnIndex = $columnIndex
+
+ return (
+ 1 ? attrs.rowspan : undefined}
+ colspan={attrs.colspan > 1 ? attrs.colspan : undefined}
+ class={[
+ 'tiny-grid-body__column',
+ column.id,
+ {
+ [`col__${cellAlign}`]: cellAlign,
+ 'col__edit': editor,
+ 'col__index': column.type === 'index',
+ 'col__radio': column.type === 'radio',
+ 'col__selection': column.type === 'selection',
+ 'col__ellipsis': cellOverflowHint,
+ 'edit__visible': editor && editor.type === 'visible',
+ 'col__dirty': isDirty,
+ 'col__actived': columnActived,
+ 'col__valid-error': validError && validated,
+ 'col__valid-success': columnActived ? !validError && !validated : isDirty && !validated,
+ 'col__treenode': column.treeNode
+ },
+ getClass(className, params),
+ getClass(cellClassName, params),
+ getFixedClass(column, $table),
+ attrs._stickyClass || ''
+ ]}>
+ {[
+ // 行拖拽手柄
+ dropConfig.rowHandle === 'index' && column.type === 'index' ?
: null,
+ // 单元格主内容
+ // 如果不是表格形态，就只保留表格结构（到tiny-grid-cell），不渲染具体的内容
+
+ {$table.isShapeTable ? column.renderCell(h, params) : null}
+
,
+ // 行内校验
+ hasDefaultTip && validError ? (
+
+
+ {validStore.content}
+
+
+ ) : null
+ ]}
+
+ )
}
-function addListenerMouseleave({ $table, evntParams, showTip, showTooltip, tableListeners, tdOns }) {
- if (showTip || showTooltip || tableListeners['cell-mouseleave']) {
- tdOns.mouseleave = (event) => {
- if (isOperateMouse($table)) {
- return
- }
-
- if (showTip || showTooltip) {
- $table.clostTooltip()
- }
+function renderHeaderRows(_vm: any): any {
+ const { $parent: $table, headerTable } = _vm
+ const { headerCellClassName, headerRowClassName, headerSuffixIconAbsolute } = $table
+ const { align: allAlign, border, headerAlign: allHeaderAlign, resizable } = $table
+ const { editConfig, operationColumnResizable, mouseConfig = {}, dropConfig = {} } = $table
+ return headerTable.map((cols, $rowIndex) => {
+ return (
+
+ {cols.map(({ id, column, colspan, rowspan, height, top }, $columnIndex) => {
+ const isColGroup = column.children?.length
+ const { headerAlign, align, headerClassName } = column
+ const { headerTip, headerOverflowTitle, headerOverflowTooltip, headerOverflowEllipsis, headerOverflowHint } =
+ getConfigOverflow(column, $table)
+ const columnIndex = $table.getColumnIndex(column)
+ const params = { $table, $rowIndex, column, columnIndex, $columnIndex, isHidden: false }
+ const isColResize = ['index', 'radio', 'selection'].includes(column.type) ? operationColumnResizable : true
+
+ let headAlign = headerAlign || align || allHeaderAlign || allAlign
+
+ if (['radio', 'selection', 'index'].includes(column.type)) {
+ headAlign = headAlign || 'center'
+ }
- evntParams.cell = event.currentTarget
+ return (
+ 1 ? colspan : undefined}
+ rowspan={rowspan > 1 ? rowspan : undefined}
+ style={[
+ getFixedStyle(column, $table),
+ { height: rowspan > 1 ? `${height}px` : undefined, top: `${top}px`, zIndex: column.fixed ? 20 : 10 }
+ ]}
+ class={[
+ 'tiny-grid-header__column',
+ column.id,
+ {
+ [`col__${headAlign}`]: headAlign,
+ 'col__fixed': column.fixed,
+ 'col__index': column.type === 'index',
+ 'col__radio': column.type === 'radio',
+ 'col__selection': column.type === 'selection',
+ 'col__group': isColGroup,
+ 'col__ellipsis': headerOverflowHint,
+ 'is__sortable': !['index', 'radio', 'selection'].includes(column.type) && column.sortable,
+ 'is__editable': column.editor,
+ 'is__filter': isObject(column.filter),
+ 'filter__active': column.filter && column.filter.hasFilter,
+ 'is__multilevel': rowspan > 1
+ },
+ getClass(headerClassName, params),
+ getClass(headerCellClassName, params),
+ getFixedClass(column, $table)
+ ]}>
+ {[
+ !isColGroup &&
+ !(isBoolean(column.resizable) ? column.resizable : resizable) &&
+ column.type !== 'index' ? (
+
+ ) : null,
+ // 如果不是表格形态，就只保留表格结构（到tiny-grid-cell），不渲染具体的内容
+
+ {$table.isShapeTable ? column.renderHeader(h, params) : null}
+
,
+ mouseConfig.checked && dropConfig.column && !column.type && !column.fixed ? (
+ event.stopPropagation()} />
+ ) : null,
+ !isColGroup && isColResize && (isBoolean(column.resizable) ? column.resizable : resizable) ? (
+
_vm.resizeMousedown(event, params)}
+ />
+ ) : null
+ ]}
+
+ )
+ })}
+
+ )
+ })
+}
- emitEvent($table, 'cell-mouseleave', [evntParams, event])
- }
- }
+function renderFooterRows(_vm: any): any {
+ const { $parent: $table, footerData, columnPool, rowHeight, footerRows } = _vm
+ const { align: allAlign, footerAlign: allFooterAlign, footerCellClassName, footerRowClassName } = $table
+ const footerDataLength = footerData.length
+
+ return footerData.map((list, $rowIndex) => {
+ const trBottom = (footerDataLength - 1 - $rowIndex) * rowHeight
+
+ return (
+
+ {columnPool.map(({ id, item: column, used }, $columnIndex) => {
+ const { footerAlign, align, footerClassName } = column
+ const ftAlign = footerAlign || align || allFooterAlign || allAlign
+ const { cellOverflowHint } = getConfigOverflow(column, $table)
+ const { attrs = { rowspan: 1, colspan: 1, visible: true }, params = { $table, column } } =
+ footerRows[$rowIndex]?.[column.id] || {}
+ const rowspan = attrs?.rowspan || 1
+ const tdBottom = trBottom - (rowspan > 1 ? (rowspan - 1) * rowHeight : 0)
+
+ params.$columnIndex = $columnIndex
+
+ return (
+ 1 ? attrs.rowspan : undefined}
+ colspan={attrs.colspan > 1 ? attrs.colspan : undefined}
+ style={[
+ getFixedStyle(column, $table),
+ attrs._stickyStyle,
+ {
+ bottom: `${tdBottom}px`,
+ zIndex: column.fixed ? 20 : 10,
+ display: used && attrs.visible ? undefined : 'none'
+ }
+ ]}
+ class={[
+ 'tiny-grid-footer__column',
+ column.id,
+ {
+ [`col__${ftAlign}`]: ftAlign,
+ 'col__ellipsis': cellOverflowHint,
+ 'filter__active': column.filter && column.filter.hasFilter
+ },
+ getClass(footerClassName, params),
+ getClass(footerCellClassName, params),
+ getFixedClass(column, $table),
+ attrs._stickyClass || ''
+ ]}>
+
+ {$table.isShapeTable ? formatText(list[$columnIndex]) : null}
+
+
+ )
+ })}
+
+ )
+ })
}
-function addListenerMousedown({ $table, evntParams, mouseConfig, tdOns }) {
- if (mouseConfig.checked || mouseConfig.selected) {
- tdOns.mousedown = (event) => {
- evntParams.cell = event.currentTarget
- $table.triggerCellMousedownEvent(event, evntParams)
+function renderRows(_vm) {
+ const { $parent: $table, tableColumn, rowPool } = _vm
+ const { afterFullData, editConfig, editStore, expandConfig = {}, expandeds, hasVirtualRow } = $table
+ const { rowClassName, rowGroup, scrollYLoad, scrollYStore, selection, treeConfig, treeOrdered } = $table
+ const expandMethod = expandConfig.activeMethod
+ const startIndex = scrollYStore.startIndex
+ const isOrdered = treeConfig ? !!treeOrdered : false
+ const { hideMethod } = treeConfig || {}
+ const { actived } = editStore
+ const rows = []
+ const seqCount = { value: 0 }
+ const $seq = ''
+
+ rowPool.forEach(({ id, item: { payload: row, level: rowLevel }, used }, $rowIndex) => {
+ const rowActived = editConfig && actived.row === row
+ const virtualRow = isVirtualRow(row)
+ const isSkipRowRender = (hideMethod && hideMethod(row, rowLevel)) || virtualRow
+ const rowid = getRowid($table, row)
+ const rowIndex = $table.getRowIndex(row)
+
+ if (!isSkipRowRender) {
+ seqCount.value = seqCount.value + 1
}
- }
-}
-function addListenerClick(args) {
- let { $table, column, editConfig, editor, evntParams, expandConfig, highlightCurrentRow } = args
- let { mouseConfig, radioConfig, selectConfig, tableListeners, tdOns, treeConfig } = args
- let satisfy = (equal, trigger) => trigger === 'row' || (equal(column) && trigger === 'cell')
+ let seq = isOrdered ? seqCount.value : $rowIndex + 1
- if (
- highlightCurrentRow ||
- tableListeners['cell-click'] ||
- mouseConfig.checked ||
- (editor && editConfig) ||
- satisfy(() => true, expandConfig.trigger) ||
- satisfy(({ type }) => type === 'radio', radioConfig.trigger) ||
- satisfy(({ type }) => type === 'selection', selectConfig.trigger) ||
- satisfy(({ treeNode }) => treeNode, treeConfig.trigger)
- ) {
- tdOns.click = (event) => {
- evntParams.cell = event.currentTarget
- $table.triggerCellClickEvent(event, evntParams)
+ if (scrollYLoad) {
+ seq += startIndex
}
- }
-}
-function getRowSpanMethod(rowSpan) {
- return ({ row, $rowIndex, column, data }) => {
- let fields = []
-
- if (rowSpan) {
- rowSpan.forEach((item) => {
- column.visible && fields.push(item.field)
- })
+ // 分组表场景正常数据行的序号由在afterFullData中的位置提供
+ if (hasVirtualRow && !virtualRow) {
+ seq = afterFullData.indexOf(row) + 1
}
- let cellVal = row[column.property]
+ renderRowGroupData({ $table, _vm, id, row, rowGroup, rowid, rows, used, virtualRow })
- if (cellVal && ~fields.indexOf(column.property)) {
- let prevSiblingRow = data[$rowIndex - 1]
- let nextSiblingRow = data[$rowIndex + 1]
+ let args = { $rowIndex, $seq, $table, _vm, editStore, id, isSkipRowRender, row, rowActived, rowClassName }
- if (prevSiblingRow && prevSiblingRow[column.property] === cellVal) {
- return { rowspan: 0, colspan: 0 }
- } else {
- let rowspanCount = 1
+ Object.assign(args, { rowIndex, rowLevel, rowid, rows, selection, seq, treeConfig, used })
- while (nextSiblingRow && nextSiblingRow[column.property] === cellVal) {
- nextSiblingRow = data[++rowspanCount + $rowIndex]
- }
+ renderRow(args)
- if (rowspanCount > 1) {
- return { rowspan: rowspanCount, colspan: 1 }
- }
- }
- }
- }
-}
+ renderRowAfter({ $table, _vm, id, row, rowIndex, rows, used })
-function addListenerDblclick({ $table, evntParams, tableListeners, tdOns, triggerDblclick }) {
- if (triggerDblclick || tableListeners['cell-dblclick']) {
- tdOns.dblclick = (event) => {
- evntParams.cell = event.currentTarget
- $table.triggerCellDBLClickEvent(event, evntParams)
- }
- }
+ args = { $table, expandMethod, expandeds, id, row, rowIndex, rowLevel, rows, seq, tableColumn, treeConfig, used }
+
+ // 如果行被展开了
+ renderRowExpanded(args)
+ })
+ renderRowFlag = !renderRowFlag
+ return rows
}
-function doSpan({ attrs, params, rowSpan, spanMethod }) {
- const rowSpanMethod = getRowSpanMethod(rowSpan)
+function renderRowExpanded(args) {
+ const { $table, expandMethod, expandeds, id, row, rowIndex } = args
+ const { rowLevel, rows, seq, tableColumn, treeConfig, used } = args
- if (spanMethod || rowSpan) {
- let { rowspan = 1, colspan = 1 } = (spanMethod ? spanMethod(params) : rowSpanMethod(params)) || {}
+ if (
+ expandeds.length &&
+ expandeds.includes(row) &&
+ (typeof expandMethod === 'function' ? expandMethod(row, rowLevel) : true)
+ ) {
+ const column = find(tableColumn, (column) => column.type === 'expand')
+ const columnIndex = $table.getColumnIndex(column)
+ let cellStyle
- if (!rowspan || !colspan) {
- return false
+ if (treeConfig) {
+ cellStyle = { paddingLeft: `${rowLevel * (treeConfig.indent || 16) + 30}px` }
}
- attrs.rowspan = rowspan
- attrs.colspan = colspan
- }
-
- return true
-}
-
-function isCellDirty({ $table, column, editConfig, isDirty, row }) {
- const { showStatus = false, relationFields = true } = editConfig || {}
- // 关联字段配置为true，或者配置包含当前字段时，支持脏数据检查
- const canChange =
- relationFields === true || (Array.isArray(relationFields) && relationFields.includes(column.property))
+ if (column) {
+ const options = { $table, seq, row, rowIndex, column, columnIndex, level: rowLevel }
- if (editConfig && showStatus && column.property && (column.editor || (relationFields && canChange))) {
- isDirty = $table.hasRowChange(row, column.property)
+ rows.push(
+
+
+
+ {column.renderData(h, options)}
+
+
+
+ )
+ }
}
-
- return isDirty
}
-const setColumnEvents = (args1) => {
- let { $columnIndex, $rowIndex, $table, column, columnIndex } = args1
- let { row, rowIndex, rowLevel, seq } = args1
- let { editConfig, expandConfig = {} } = $table
- let { radioConfig = {}, showOverflow: allColumnOverflow } = $table
- let { highlightCurrentRow, mouseConfig = {} } = $table
- let { scrollXLoad, scrollYLoad, selectConfig = {} } = $table
- let { tableListeners, treeConfig = {} } = $table
- let tdOns = {}
- let fixedHiddenColumn = column.fixed
- let { editor, showOverflow, showTip } = column
- let cellOverflow = isNull(showOverflow) ? allColumnOverflow : showOverflow
- let showTitle = cellOverflow === 'title'
- let showTooltip = cellOverflow === true || cellOverflow === 'tooltip'
- let showEllipsis = cellOverflow === 'ellipsis'
- let hasEllipsis = showTitle || showTooltip || showEllipsis
- let triggerDblclick = editor && editConfig && editConfig.trigger === 'dblclick'
-
- let commonParams = { $columnIndex, $rowIndex, $table, column, columnIndex }
- Object.assign(commonParams, { isHidden: fixedHiddenColumn, level: rowLevel, row, rowIndex, seq })
-
- let evntParams = { showTip, ...commonParams }
- // 滚动的渲染不支持动态行高
- showEllipsis = modifyShowEllipsis({ hasEllipsis, scrollXLoad, scrollYLoad, showEllipsis })
- // 单元格hover 进入事件
- addListenerMouseenter({ $table, evntParams, showTip, showTitle, showTooltip, tableListeners, tdOns })
- // 单元格hover 退出事件
- addListenerMouseleave({ $table, evntParams, showTip, showTooltip, tableListeners, tdOns })
- // 按下事件处理
- addListenerMousedown({ $table, evntParams, mouseConfig, tdOns })
-
- let args = { $table, column, editConfig, editor, evntParams, expandConfig, highlightCurrentRow }
- Object.assign(args, { mouseConfig, radioConfig, selectConfig, tableListeners, tdOns, treeConfig })
- // 点击事件处理
- addListenerClick(args)
- // 双击事件处理
- addListenerDblclick({ $table, evntParams, tableListeners, tdOns, triggerDblclick })
-
- return {
- commonParams,
- args,
- cellOverflow,
- showTitle,
- showTooltip,
- showEllipsis,
- hasEllipsis,
- tdOns,
- fixedHiddenColumn
- }
+function renderRowAfter({ $table, _vm, row, rowIndex, rows, id, used }) {
+ typeof $table.renderRowAfter === 'function' &&
+ $table.renderRowAfter.call($table, { rows, row, data: _vm.tableData, rowIndex, renderColumn, id, used }, h)
}
-// 渲染列
-function renderColumn(args1) {
- let { $seq, $table, column, columnIndex } = args1
- let { h, row } = args1
- let { align: allAlign, cellClassName, columnKey, editConfig } = $table
- let { editRules, editStore, rowId, rowSpan, height } = $table
- let { tableData, validOpts, validStore, validatedMap, spanMethod, columnStore, dropConfig = {} } = $table
- let { isDirty, attrs = { 'data-colid': column.id } } = {}
- let { isMessageDefault, isMessageInline } = validOpts
- let { actived } = editStore
- let validated = validatedMap[`${column.id}-${row[rowId]}`]
- let validError = validStore.row === row && validStore.column === column
- let hasDefaultTip = editRules && (isMessageDefault ? height || tableData.length > 1 : isMessageInline)
- let { align, editor, showTip } = column
- const className = column.own.className
- let cellAlign = align || allAlign
- let columnActived =
- editConfig && editor && actived.row === row && (actived.column === column || editConfig.mode === 'row')
-
- let {
- commonParams,
- args,
- showTitle,
- showTooltip,
- showEllipsis,
- tdOns = {},
- hasEllipsis,
- fixedHiddenColumn
- } = setColumnEvents(args1)
- let params = { $seq, data: tableData, ...commonParams }
- // 索引列、选择列如果不配置对齐方式则默认为居中对齐
- cellAlign = modifyCellAlign({ cellAlign, column })
+function renderRow(args) {
+ const { $rowIndex, $seq, $table, _vm, editStore, id, isSkipRowRender, row, rowActived, rowClassName } = args
+ const { rowIndex, rowLevel, rowid, rows, selection, seq, treeConfig, used } = args
- // 合并行或列
- if (!doSpan({ attrs, params, rowSpan, spanMethod })) {
+ if (isSkipRowRender) {
return
}
- // 编辑后的显示状态（是否该单元格数据被更改）此处如果是树表大数据虚拟滚动+表格编辑器，会造成卡顿，这里需要递归树表数据
- isDirty = isCellDirty({ $table, column, editConfig, isDirty, row })
- args = {
- attrs,
- cellAlign,
- cellClassName,
- className,
- column,
- columnActived,
- columnIndex,
- columnKey,
- editor,
- columnStore
- }
- Object.assign(args, { fixedHiddenColumn, hasEllipsis, isDirty, params, tdOns, validError, validated })
- // 组装渲染单元格td所需要的props属性
- const colProps = buildColumnProps(args)
- args = { column, h, hasDefaultTip, params, row, $table }
- Object.assign(args, { showEllipsis, showTip, showTitle, showTooltip, validError, validStore, dropConfig })
+ let key = id
+ if (row._isDraging) {
+ // 防止数据多次刷新导致key回归rowid
+ _vm.$nextTick(() => {
+ delete row._isDraging
+ })
+ if (renderRowFlag) {
+ key = `drag_${key}`
+ }
+ }
- // 渲染td单元格中的div元素（自定义渲染和编辑器）
- const colChildren = buildColumnChildren(args)
+ const { columnPool } = _vm
- return h('td', colProps, colChildren)
+ rows.push(
+
+ {columnPool.map(({ id, item: column, used }, $columnIndex) =>
+ renderColumn({ $columnIndex, $table, _vm, column, id, row, rowid, seq, used })
+ )}
+
+ )
}
-function renderRowGroupTds(args) {
- const { $table, closeable, currentIcon, render, renderGroupCell } = args
- const { row, tableColumn, tds, title } = args
+function renderRowGroupTds({ $table, closeable, render, renderGroupCell, row, tds, title, _vm }) {
const targetColumn = $table._rowGroupTargetColumn
const value = row.value || ''
+ const { columnPool } = _vm
- for (let index in tableColumn) {
- if (Object.prototype.hasOwnProperty.call(tableColumn, index)) {
- const column = tableColumn[index]
- const columnIndex = $table.getColumnIndex(column)
- const header = title || formatText(getFuncText(column.title), 1) || value
- const params = { value, header, children: row.children, expand: !row.fold, row, column, columnIndex }
-
- // 不渲染colspan小于等于0的列
- if (column._rowGroupColspan <= 0) {
- continue
- }
- if (column === targetColumn) {
- let groupTitleVNode
-
- if (render) {
- groupTitleVNode = render(h, params)
- } else {
- groupTitleVNode = [
- {header} ,
- `:${value}`,
- {row.children.length}
- ]
- }
- tds.push(
-
- {[closeable ? currentIcon : null].concat(groupTitleVNode)}
-
- )
- } else {
- tds.push(
-
- {renderGroupCell ? renderGroupCell(h, params) : null}
-
- )
- }
- }
+ for (let { id, item: column, used } of columnPool) {
+ const columnIndex = $table.getColumnIndex(column)
+ const header = title || formatText(getFuncText(column.title), 1) || value
+ const params = { value, header, children: row.children, expand: !row.fold, row, column, columnIndex }
+ const isTarget = column === targetColumn
+
+ tds.push(
+ 0 ? undefined : 'none' }]}
+ class={[
+ 'tiny-grid-body__column',
+ isTarget ? 'td-group' : 'td-placeholder',
+ column.id,
+ getFixedClass(column, $table),
+ column._stickyClass || ''
+ ]}
+ colspan={column._rowGroupColspan}
+ data-colid={column.id}>
+
+ {isTarget
+ ? [
+ closeable ? (
+ row.fold ? (
+ {header} ,
+ ':' + value,
+ {row.children.length}
+ ]
+ )
+ : renderGroupCell
+ ? renderGroupCell(h, params)
+ : null}
+
+
+ )
}
}
-function renderRowGroupData({ $table, virtualRow, row, rowGroup, rowid, rows, tableColumn }) {
- if (!virtualRow) {
- return
- }
+function renderRowGroupData({ $table, _vm, id, row, rowGroup, rowid, rows, used, virtualRow }) {
+ if (!virtualRow) return
const { title, closeable = true, render, renderGroupCell, className } = rowGroup
- const { tds = [], ChevronRight = iconChevronRight(), ChevronDown = iconChevronDown() } = {}
- const currentIcon = row.fold ? (row.hover = false)}
onMouseover={() => (row.hover = true)}
@@ -533,449 +555,439 @@ function renderRowGroupData({ $table, virtualRow, row, rowGroup, rowid, rows, ta
)
}
-function renderRow(args) {
- let { $rowIndex, $seq, $table, _vm, editStore } = args
- let { h, row, rowActived } = args
- let { rowClassName, rowIndex, rowKey, rowLevel, rowid, rows } = args
- let { seq, trOn, isNotRenderRow } = args
- const { selection, tableColumn, treeConfig, selectRow } = $table
+function renderTable({ $table, _vm }) {
+ const { tableLayout, scrollXLoad, scrollYLoad, bodyTableWidth, isColumnWidthAssigned } = $table
+ const { columnPool, isNoData } = _vm
- if (isNotRenderRow) {
+ if (!isColumnWidthAssigned) {
return
}
- let key = rowid
- if (row._isDraging) {
- // 防止数据多次刷新导致key回归rowid
- _vm.$nextTick(() => {
- delete row._isDraging
- })
- if (renderRowFlag) {
- key = `${rowid}${rowKey}`
- }
- }
-
- rows.push(
- h(
- 'tr',
- {
- class: [
- 'tiny-grid-body__row',
- {
- [`row__level-${rowLevel}`]: treeConfig,
- [classMap.rowNew]: editStore.insertList.includes(row),
- [classMap.rowSelected]: selection.includes(row),
- [classMap.rowRadio]: selectRow === row,
- [classMap.rowActived]: rowActived
- },
- rowClassName
- ? isFunction(rowClassName)
- ? rowClassName({ $table, $seq, seq, rowLevel, row, rowIndex, $rowIndex })
- : rowClassName
- : ''
- ],
- attrs: {
- 'data-rowid': rowid
- },
- key,
- on: trOn
- },
- tableColumn.map((column, $columnIndex) => {
- let columnIndex = $table.getColumnIndex(column)
- let args1 = { $columnIndex, $rowIndex, $seq, $table, _vm, column, columnIndex }
-
- Object.assign(args1, { h, row, rowIndex, rowLevel, seq })
+ const tableVnode = (
+
+ {[
+ // 列分组（用于指定列宽）
+
+ {columnPool.map(({ id, item: column, used }) => {
+ return (
+ ,
+ // 表头
+ $table.showHeader ? {renderHeaderRows(_vm)} : null,
+ // 表体内容
+ {renderRows(_vm)} ,
+ // 表尾
+ $table.showFooter && !isNoData && typeof $table.renderFooter !== 'function' ? (
+ {renderFooterRows(_vm)}
+ ) : null
+ ]}
+
+ )
- return renderColumn(args1)
- })
- )
+ return scrollXLoad || scrollYLoad ? (
+
+ {tableVnode}
+
+ ) : (
+ tableVnode
)
}
-function renderRowAfter({ $table, h, row, rowIndex, rows, tableData }) {
- typeof $table.renderRowAfter === 'function' &&
- $table.renderRowAfter({ rows, row, data: tableData, rowIndex, renderColumn }, h)
-}
+const calcScrollLeft = ($table, wrapperScrollLeft) => {
+ const { visibleColumn, tableColumn } = $table
+ let start, end, total, offset, column
-function renderRowExpanded(args) {
- const { $table, expandMethod, expandeds, h, row, rowIndex } = args
- const { rowLevel, rowid, rows, seq, tableColumn, trOn, treeConfig } = args
+ start = end = total = offset = 0
- if (
- expandeds.length &&
- expandeds.includes(row) &&
- (typeof expandMethod === 'function' ? expandMethod(row, rowLevel) : true)
- ) {
- const column = find(tableColumn, (column) => column.type === 'expand')
- const columnIndex = $table.getColumnIndex(column)
- let cellStyle
+ for (const col of visibleColumn) {
+ start = end
+ end = start + col.renderWidth
- if (treeConfig) {
- cellStyle = { paddingLeft: `${rowLevel * (treeConfig.indent || 16) + 30}px` }
+ if (wrapperScrollLeft >= start && wrapperScrollLeft < end) {
+ offset = wrapperScrollLeft - total
+ column = col
+ break
}
- if (column) {
- const renderData = { $table, seq, row, rowIndex, column, columnIndex, level: rowLevel }
- rows.push(
- h(
- 'tr',
- {
- class: 'tiny-grid-body__expanded-row',
- key: `expand_${rowid}`,
- on: trOn
- },
- [
- h(
- 'td',
- {
- class: 'tiny-grid-body__expanded-column',
- attrs: { colspan: tableColumn.length }
- },
- [
- h(
- 'div',
- {
- class: 'tiny-grid-body__expanded-cell',
- style: cellStyle
- },
- [column.renderData(h, renderData)]
- )
- ]
- )
- ]
- )
- )
- }
+ total += col.renderWidth
}
-}
-
-function renderRowTree(args, renderRows) {
- let { $seq, $table, _vm, h, row, rowLevel } = args
- let { rows, seq, seqCount, tableColumn, treeConfig, treeExpandeds } = args
- let { scrollYLoad } = $table
- // 如果没有树表配置或者树表展开行数为零，则直接跳过
- if (!treeConfig || !treeExpandeds.length) {
- return
- }
+ total = 0
- let childrenKey = getTreeChildrenKey({ scrollYLoad, treeConfig })
- let rowChildren = row[childrenKey]
-
- // 若果当前行不是展开行或者子节点个数为零，则跳过
- if (!rowChildren || !rowChildren.length || !~treeExpandeds.indexOf(row)) {
- return
- }
+ for (const col of tableColumn) {
+ if (col === column) {
+ total += offset
+ break
+ }
- const args1 = {
- h,
- _vm,
- $table,
- // $seq 树表特有序号：1 --> 1.1
- $seq: $seq ? `${$seq}.${seq}` : `${seq}`,
- rowLevel: rowLevel + 1,
- tableData: rowChildren,
- tableColumn,
- seqCount
+ total += col.renderWidth
}
- rows.push(...renderRows(args1))
+ return total
}
-function renderRows({ h, _vm, $table, $seq, rowLevel, tableData, tableColumn, seqCount }) {
- let { rowKey, rowClassName, treeConfig, treeExpandeds } = $table
- let { groupData, scrollYLoad, scrollYStore, editConfig, editStore, expandConfig = {} } = $table
- let { expandeds, selection, rowGroup, hasVirtualRow, afterFullData, treeOrdered } = $table
- let rows = []
- let expandMethod = expandConfig.activeMethod
- let startIndex = scrollYStore.startIndex
- // 子级索引是否按数字递增显示：true(子级索引按数字递增显示，父级1，子级2)；false(子级索引在父级索引基础上增加，父级1，子级1.1)
- let isOrdered = treeConfig ? Boolean(treeOrdered) : false
- seqCount = seqCount || { value: 0 }
- let treeShowKey = getTreeShowKey({ scrollYLoad, treeConfig })
- let { hideMethod } = treeConfig || {}
-
- // 循环表格数据，生成表格主体内容VNode，此处也是性能优化的整改点
- tableData.forEach((row, $rowIndex) => {
- let trOn = {}
- let rowIndex = $rowIndex
- let { actived } = editStore
- let rowActived = editConfig && actived.row === row
- let virtualRow = isVirtualRow(row)
- const isNotRenderRow = (treeShowKey && !row[treeShowKey]) || (hideMethod && hideMethod(row, rowLevel)) || virtualRow
-
- // 树表虚拟滚动，如果当前行被剪切不需要渲染，则无需自增序号
- if (!isNotRenderRow) {
- seqCount.value = seqCount.value + 1
- }
+const calcScrollTop = ($table, wrapperScrollTop) => {
+ const { _graphInfo, tableData, headerHeight, rowHeight } = $table
+ const graphed = _graphInfo.graphed
+ const rows = graphed.map((node) => node.payload)
+ let start, end, total, offset, row
- let seq = isOrdered ? seqCount.value : rowIndex + 1
- if (scrollYLoad) {
- seq += startIndex
- }
- // 分组表场景正常数据行的序号由在afterFullData中的位置提供
- if (hasVirtualRow && !virtualRow) {
- seq = afterFullData.indexOf(row) + 1
- }
- // 确保任何情况下 rowIndex 都精准指向真实 data 索引
- rowIndex = $table.getRowIndex(row)
+ start = end = total = offset = 0
- let rowid = getRowid($table, row)
+ if (wrapperScrollTop < headerHeight) {
+ total = wrapperScrollTop
+ } else {
+ start = end = total = offset = headerHeight
- // 如果有表格分组信息，则执行分组逻辑
- renderRowGroupData({ $table, virtualRow, row, rowGroup, rowid, rows, tableColumn })
- let args = { $rowIndex, $seq, $table, _vm, editStore, h, row, rowActived }
- Object.assign(args, { rowClassName, rowIndex, rowKey, rowLevel, rowid, rows, selection, seq })
+ for (const r of rows) {
+ start = end
+ end = start + rowHeight
- Object.assign(args, { tableColumn, trOn, treeConfig, isNotRenderRow })
+ if (wrapperScrollTop >= start && wrapperScrollTop < end) {
+ offset = wrapperScrollTop - total
+ row = r
+ break
+ }
- // 输出表格行列的vnode节点列表
- renderRow(args)
+ total += rowHeight
+ }
- // 允许用户自定义表格行渲染后的逻辑
- renderRowAfter({ $table, h, row, rowIndex, rows, tableData })
- args = { $table, expandMethod, expandeds, h, row, rowIndex, rowLevel }
- Object.assign(args, { rowid, rows, seq, tableColumn, trOn, treeConfig })
+ total = headerHeight
- // 如果行被展开了，这里渲染展开行的vnode节点
- renderRowExpanded(args)
- args = { $seq, $table, _vm, h, row, rowLevel, rows }
- Object.assign(args, { seq, seqCount, tableColumn, treeConfig, treeExpandeds })
+ for (const r of tableData) {
+ if (hooks.toRaw(r) === hooks.toRaw(row)) {
+ total += offset
+ break
+ }
- // 如果是树形表格，则会递归渲染已展开行的子节点
- renderRowTree(args, renderRows)
- })
- renderRowFlag = !renderRowFlag
+ total += rowHeight
+ }
+ }
- return rows
+ return total
}
+export default defineComponent({
+ name: `${$prefix}GridBody`,
+ props: {
+ collectColumn: Array,
+ tableColumn: Array,
+ tableNode: Array,
+ tableData: Array,
+ footerData: Array
+ },
+ setup(props, { slots }) {
+ const vm = hooks.getCurrentInstance()?.proxy
+ const $table = vm?.$parent
+ const rowHeight = hooks.computed(() => $table.rowHeight)
+ const headerRowHeight = hooks.computed(() => $table.headerRowHeight)
+ const { headerTable } = useHeader(props, vm, headerRowHeight)
+ const { columnPool, rowPool, isNoData } = usePool(props)
+ const wrapperScrollLeft = hooks.ref(0)
+ const wrapperScrollTop = hooks.ref(0)
+ const stickyWrapper = hooks.ref()
+ const table = hooks.ref()
+ const body = hooks.ref()
+ const customFooter = hooks.ref()
+ const colgroup = hooks.ref()
+ const thead = hooks.ref()
+ const tbody = hooks.ref()
+ const ySpace = hooks.ref()
+
+ hooks.watch(wrapperScrollLeft, (wrapperScrollLeft) => {
+ const el = stickyWrapper.value
+ if (!el) return
+ hooks.nextTick(() => (el.scrollLeft = calcScrollLeft($table, wrapperScrollLeft)))
+ })
-function renderDefEmpty(h) {
- return [
- h(GridNoData, {
- class: 'tiny-grid__empty-img'
- }),
- h(
- 'span',
- {
- class: 'tiny-grid__empty-text'
- },
- GlobalConfig.i18n('ui.grid.emptyText')
- )
- ]
-}
+ hooks.watch(wrapperScrollTop, (wrapperScrollTop) => {
+ const el = stickyWrapper.value
+ if (!el) return
+ hooks.nextTick(() => (el.scrollTop = calcScrollTop($table, wrapperScrollTop)))
+ })
-const syncHeaderAndFooterScroll = ({ bodyElem, footerElem, headerElem, isX }) => {
- const scrollLeft = bodyElem.scrollLeft
- if (isX && headerElem) {
- headerElem.scrollLeft = scrollLeft
- }
- if (isX && footerElem) {
- footerElem.scrollLeft = scrollLeft
- }
-}
+ useCellEvent({ table, $table })
+ const { normalRows, footerRows } = useCellSpan(vm, props)
-function doScrollLoad({ $table, _vm, bodyElem, event, headerElem, isX, isY, scrollLeft, scrollXLoad, scrollYLoad }) {
- let isScrollX = scrollXLoad && isX
+ hooks.watch([body, table, thead, tbody, ySpace], () => {
+ const { elemStore } = $table
- // 如果是水平虚拟滚动，并且正在进行水平滚动，就触发水平虚滚事件
- if (isScrollX) {
- // 处理x轴方法虚拟滚动加载数据逻辑
- $table.triggerScrollXEvent(event)
- }
+ elemStore['main-body-wrapper'] = body.value
+ elemStore['main-body-table'] = table.value
+ elemStore['main-body-headerList'] = thead.value
+ elemStore['main-body-list'] = tbody.value
+ elemStore['main-body-ySpace'] = ySpace.value
+ })
- // 同上，并且主表头存在时，修复极端场景（拖动滚动条到最右侧）表头表体水平滚动位置不同步问题
- if (isScrollX && headerElem && scrollLeft + bodyElem.clientWidth >= bodyElem.scrollWidth) {
- // 修复拖动滚动条时可能存在不同步问题
- _vm.$nextTick(() => {
- if (bodyElem.scrollLeft !== headerElem.scrollLeft) {
- headerElem.scrollLeft = bodyElem.scrollLeft
+ const bodyClientWidth = hooks.ref(0)
+
+ const resizeObserver = new ResizeObserver((entries) => {
+ for (let entry of entries) {
+ const target = entry.target as HTMLElement
+
+ switch (target) {
+ case body.value:
+ bodyClientWidth.value = target.clientWidth
+ break
+ case customFooter.value:
+ $table.footerHeight = target.offsetHeight
+ }
}
})
- }
- // 如果是垂直虚拟滚动，并且正在进行垂直滚动，就触发垂直虚滚事件
- if (scrollYLoad && isY) {
- // 处理y轴方法虚拟滚动加载数据逻辑
- $table.triggerScrollYEvent(event)
- }
-}
+ hooks.watch(body, (body) => body && resizeObserver.observe(body))
-function renderEmptyBlock({ $slots, $table, _vm, isCenterCls, renderEmpty, tableData }) {
- return h(
- 'div',
- {
- class: `tiny-grid__empty-block${tableData.length ? '' : ' is__visible'} ${isCenterCls}`,
- ref: 'emptyBlock'
- },
- $slots.empty ? $slots.empty.call(_vm, { $table }, h) : renderEmpty ? [renderEmpty(h, $table)] : renderDefEmpty(h)
- )
-}
+ hooks.watch(customFooter, (customFooter) => customFooter && resizeObserver.observe(customFooter))
-function renderBorders({ keyboardConfig, mouseConfig }) {
- let res: any = null
+ hooks.watchEffect(() => {
+ if ($table.isColumnWidthAssigned) {
+ const columns = $table.scrollXLoad ? $table.visibleColumn : $table.tableColumn
+ const scrollWidth = columns.reduce((total, col) => (total += col.renderWidth), 0)
+ const clientWidth = bodyClientWidth.value
- // 如果用户配置了鼠标和键盘配置项
- if (mouseConfig.checked || keyboardConfig.isCut) {
- res = h('div', { class: 'tiny-grid__borders' }, [
- mouseConfig.checked ? renderBorder(h, 'check') : null,
- keyboardConfig.isCut ? renderBorder(h, 'copy') : null
- ])
- }
+ $table.horizonScroll.max = scrollWidth > clientWidth ? scrollWidth - clientWidth : 0
+ }
+ })
- return res
-}
+ hooks.onMounted(() => {
+ // 节流滚动降低滚动事件处理次数
+ vm._throttleScrollHandler = throttle($table.optimizeOpts.scrollDelay, vm.handleScroll)
-function renderTable({ $table, _vm, tableColumn, tableData, tableLayout }) {
- return h(
- 'table',
- {
- class: 'tiny-grid__body',
- style: { tableLayout },
- attrs: { cellspacing: 0, cellpadding: 0, border: 0 },
- ref: 'table'
- },
- [
- // 渲染colgroup标签，设置表格列宽度，保证表头的表格和表体的表格每列宽相同
- h(
- 'colgroup',
- { ref: 'colgroup' },
- tableColumn.map((column, columnIndex) => h('col', { attrs: { name: column.id }, key: columnIndex }))
- ),
- // 表格每次数据改变都会触发renderRow重新执行，会造成性能损失，此处待优化
- h('tbody', { ref: 'tbody' }, renderRows({ h, _vm, $table, $seq: '', rowLevel: 0, tableData, tableColumn }))
- ]
- )
-}
+ body.value?.addEventListener('scroll', vm._throttleScrollHandler)
-// 如果scrollLoad存在，标识开启了滚动分页功能
-function renderYSpace({ scrollLoad }) {
- return h('div', { class: 'tiny-grid-body__y-space visual', ref: 'ySpace' }, [
- scrollLoad ? h('div', { class: 'tiny-grid-body__y-scrollbar' }) : [null]
- ])
-}
+ // 初始化行列拖拽
+ setTimeout(() => {
+ const { dropConfig } = $table
+
+ if (dropConfig) {
+ const { plugin, row = true, column = true, scheme } = dropConfig
+
+ plugin && row && (vm.rowSortable = $table.rowDrop(body.value))
+
+ if (scheme !== 'v2') {
+ plugin && column && (vm.columnSortable = $table.columnDrop(body.value))
+ }
+ }
+ }, 50)
+ })
-export default defineComponent({
- name: `${$prefix}GridBody`,
- props: {
- collectColumn: Array,
- fixedColumn: Array,
- isGroup: Boolean,
- size: String,
- tableColumn: Array,
- tableData: Array,
- visibleColumn: Array
- },
- mounted() {
- const { $el, $parent: $table, $refs } = this as any
- const { elemStore, dropConfig } = $table
- const keyPrefix = 'main-body-'
-
- // 表体第一层div，出现滚动条的dom元素
- elemStore[`${keyPrefix}wrapper`] = $el
- // 表体table元素
- elemStore[`${keyPrefix}table`] = $refs.table
- // colgroup元素，保持表头和表体宽度保持一致
- elemStore[`${keyPrefix}colgroup`] = $refs.colgroup
- // tbody元素
- elemStore[`${keyPrefix}list`] = $refs.tbody
- // x轴滚动条占位元素
- elemStore[`${keyPrefix}xSpace`] = $refs.xSpace
- // y轴滚动条占位元素
- elemStore[`${keyPrefix}ySpace`] = $refs.ySpace
- // 空数据元素
- elemStore[`${keyPrefix}emptyBlock`] = $refs.emptyBlock
-
- if (dropConfig) {
- const { plugin, row = true } = dropConfig
- plugin && row && (this.rowSortable = $table.rowDrop(this.$el))
- }
- },
- beforeUnmount() {
- this.rowSortable && this.rowSortable.destroy()
- },
- updated() {
- const { $parent: $table, fixedType } = this
- !fixedType && $table.updateTableBodyHeight()
- },
- setup(props, { slots }) {
hooks.onBeforeUnmount(() => {
- const table = hooks.getCurrentInstance().proxy
+ const { rowSortable, columnSortable } = vm
- table.$el._onscroll = null
- table.$el.onscroll = null
+ body.value?.removeEventListener('scroll', vm._throttleScrollHandler)
+ vm._throttleScrollHandler = null
+ rowSortable && rowSortable.destroy()
+ columnSortable && columnSortable.destroy()
+ resizeObserver.disconnect()
})
- return { slots }
+ return {
+ slots,
+ rowHeight,
+ headerTable,
+ columnPool,
+ rowPool,
+ isNoData,
+ wrapperScrollLeft,
+ wrapperScrollTop,
+ stickyWrapper,
+ table,
+ body,
+ customFooter,
+ colgroup,
+ thead,
+ tbody,
+ ySpace,
+ normalRows,
+ footerRows
+ }
},
render() {
- let { $parent: $table } = this as any
- let { $grid, isCenterEmpty, keyboardConfig = {}, mouseConfig = {}, renderEmpty } = $table
- let { scrollLoad, tableColumn, tableData, tableLayout } = $table
- let $slots = $grid.slots
- let isCenterCls = isCenterEmpty ? 'is__center' : ''
-
- return h(
- 'div',
- {
- ref: 'body',
- class: ['tiny-grid__body-wrapper', 'body__wrapper', { [classMap.isScrollload]: scrollLoad }],
- on: {
- scroll: this.scrollEvent
- }
- },
- [
- // 表格主体内容x轴方向虚拟滚动条占位元素
- h('div', { class: 'tiny-grid-body__x-space', ref: 'xSpace' }),
- renderYSpace({ scrollLoad }),
- renderTable({ $table, _vm: this, tableColumn, tableData, tableLayout }),
- // 开启鼠标或者配置项选中边框线
- renderBorders({ keyboardConfig, mouseConfig }),
- // 空数据
- renderEmptyBlock({ $slots, $table, _vm: this, isCenterCls, renderEmpty, tableData })
- ]
+ const { $parent: $table, isNoData, tableColumn, footerData } = this
+ const { $grid, keyboardConfig, mouseConfig, scrollLoad, showFooter, renderFooter } = $table
+ const { containerScrollWidth, containerScrollHeight, scrollLoadScrollHeight } = $table
+ const { bodyWrapperHeight, bodyWrapperMinHeight, bodyWrapperMaxHeight } = $table
+ const $slots = $grid.slots
+ const _vm = this
+
+ return (
+
+ {[
+
,
+
+ {scrollLoad ? (
+
+ ) : null}
+
,
+ // 内容表格
+ renderTable({ $table, _vm }),
+ // 渲染自定义表尾
+ showFooter && !isNoData && typeof renderFooter === 'function' ? (
+
+ ) : null,
+ // 选中边框线
+ mouseConfig.checked || keyboardConfig.isCut ? (
+
+ {[mouseConfig.checked ? renderBorder('check') : null, keyboardConfig.isCut ? renderBorder('copy') : null]}
+
+ ) : null,
+ // 空数据
+ isNoData ? (
+
+ {$slots.empty
+ ? $slots.empty.call(_vm, { $table }, h)
+ : $table.renderEmpty
+ ? [$table.renderEmpty(h, $table)]
+ : [
+ {GlobalConfig.i18n('ui.grid.emptyText')}
+ ]}
+
+ ) : null
+ ]}
+