vxe-table 3.8.24 → 3.9.0-rc.0

package/es/table/src/column.js

@@ -0,0 +1,139 @@
+import Cell from './cell';
+import { assembleColumn, destroyColumn } from './util';
+const props = {
+    // 列唯一主键
+    colId: [String, Number],
+    // 渲染类型 seq,radio,checkbox,expand,html
+    type: String,
+    // 列字段名
+    field: String,
+    // 列标题
+    title: String,
+    // 列宽度
+    width: [Number, String],
+    // 列最小宽度，把剩余宽度按比例分配
+    minWidth: [Number, String],
+    // 列最大宽度
+    maxWidth: [Number, String],
+    // 是否允许拖动列宽调整大小
+    resizable: { type: Boolean, default: null },
+    // 将列固定在左侧或者右侧
+    fixed: String,
+    // 列对其方式
+    align: String,
+    // 表头对齐方式
+    headerAlign: String,
+    // 表尾列的对齐方式
+    footerAlign: String,
+    // 当内容过长时显示为省略号
+    showOverflow: { type: [Boolean, String], default: null },
+    // 当表头内容过长时显示为省略号
+    showHeaderOverflow: { type: [Boolean, String], default: null },
+    // 当表尾内容过长时显示为省略号
+    showFooterOverflow: { type: [Boolean, String], default: null },
+    // 给单元格附加 className
+    className: [String, Function],
+    // 给表头单元格附加 className
+    headerClassName: [String, Function],
+    // 给表尾单元格附加 className
+    footerClassName: [String, Function],
+    // 格式化显示内容
+    formatter: [Function, Array, String],
+    // 格式化表尾显示内容
+    footerFormatter: [Function, Array, String],
+    // 是否允许排序
+    sortable: Boolean,
+    // 在 v3 中废弃
+    remoteSort: { type: Boolean, default: null },
+    // 在 v3 中只支持字符串类型
+    sortBy: [String, Function],
+    // 排序的字段类型，比如字符串转数值等
+    sortType: String,
+    // 在 v3 中废弃
+    sortMethod: Function,
+    // 配置筛选条件数组
+    filters: { type: Array, default: null },
+    // 筛选是否允许多选
+    filterMultiple: { type: Boolean, default: true },
+    // 自定义筛选方法
+    filterMethod: Function,
+    // 筛选重置方法
+    filterResetMethod: Function,
+    // 筛选复原方法
+    filterRecoverMethod: Function,
+    // 筛选模板配置项
+    filterRender: Object,
+    // 指定为树节点
+    treeNode: Boolean,
+    // 是否可视
+    visible: { type: Boolean, default: null },
+    // 表头单元格数据导出方法
+    headerExportMethod: Function,
+    // 单元格数据导出方法
+    exportMethod: Function,
+    // 表尾单元格数据导出方法
+    footerExportMethod: Function,
+    // 已废弃，被 titlePrefix 替换
+    titleHelp: Object,
+    // 标题前缀图标配置项
+    titlePrefix: Object,
+    // 标题后缀图标配置项
+    titleSuffix: Object,
+    // 单元格值类型
+    cellType: String,
+    // 单元格渲染配置项
+    cellRender: Object,
+    // 单元格编辑渲染配置项
+    editRender: Object,
+    // 内容渲染配置项
+    contentRender: Object,
+    // 额外的参数
+    params: Object
+};
+const watch = {};
+Object.keys(props).forEach(name => {
+    watch[name] = function (value) {
+        this.columnConfig.update(name, value);
+        if (this.$xetable) {
+            if (name === 'filters') {
+                this.$xetable.setFilter(this.columnConfig, value);
+                this.$xetable.handleUpdateDataQueue();
+            }
+            else if (['visible', 'fixed', 'width', 'minWidth', 'maxWidth'].includes(name)) {
+                this.$xetable.handleRefreshColumnQueue();
+            }
+        }
+    };
+});
+export default {
+    name: 'VxeColumn',
+    props,
+    provide() {
+        return {
+            $xecolumn: this,
+            $xegrid: null
+        };
+    },
+    inject: {
+        $xetable: {
+            default: null
+        },
+        $xecolumn: {
+            default: null
+        }
+    },
+    watch,
+    created() {
+        this.columnConfig = this.createColumn(this.$xetable, this);
+    },
+    mounted() {
+        assembleColumn(this);
+    },
+    destroyed() {
+        destroyColumn(this);
+    },
+    render(h) {
+        return h('div', this.$slots.default);
+    },
+    methods: Cell
+};

package/es/table/src/columnInfo.js

@@ -0,0 +1,158 @@
+import XEUtils from 'xe-utils';
+import { VxeUI } from '../../ui';
+import { toFilters } from './util';
+import { getFuncText } from '../../ui/src/utils';
+import { warnLog, errLog } from '../../ui/src/log';
+const { getI18n, formats } = VxeUI;
+export class ColumnInfo {
+    /* eslint-disable @typescript-eslint/no-use-before-define */
+    constructor($xetable, _vm, { renderHeader, renderCell, renderFooter, renderData } = {}) {
+        const $xegrid = $xetable.$xegrid;
+        const proxyOpts = $xegrid ? $xegrid.proxyOpts : null;
+        const formatter = _vm.formatter;
+        const visible = XEUtils.isBoolean(_vm.visible) ? _vm.visible : true;
+        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+            const types = ['seq', 'checkbox', 'radio', 'expand', 'html'];
+            if (_vm.type && types.indexOf(_vm.type) === -1) {
+                warnLog('vxe.error.errProp', [`type=${_vm.type}`, types.join(', ')]);
+            }
+            if (XEUtils.isBoolean(_vm.cellRender) || (_vm.cellRender && !XEUtils.isObject(_vm.cellRender))) {
+                warnLog('vxe.error.errProp', [`column.cell-render=${_vm.cellRender}`, 'column.cell-render={}']);
+            }
+            if (XEUtils.isBoolean(_vm.editRender) || (_vm.editRender && !XEUtils.isObject(_vm.editRender))) {
+                warnLog('vxe.error.errProp', [`column.edit-render=${_vm.editRender}`, 'column.edit-render={}']);
+            }
+            if (_vm.cellRender && _vm.editRender) {
+                warnLog('vxe.error.errConflicts', ['column.cell-render', 'column.edit-render']);
+            }
+            if (_vm.type === 'expand') {
+                if ($xetable.treeConfig && ($xetable.treeOpts.showLine || $xetable.treeOpts.line)) {
+                    errLog('vxe.error.errConflicts', ['tree-config.line', 'column.type=expand']);
+                }
+            }
+            if (_vm.remoteSort) {
+                warnLog('vxe.error.delProp', ['column.remote-sort', 'sort-config.remote']);
+            }
+            if (_vm.sortMethod) {
+                warnLog('vxe.error.delProp', ['column.sort-method', 'sort-config.sortMethod']);
+            }
+            if (formatter) {
+                if (XEUtils.isString(formatter)) {
+                    const gFormatOpts = formats.get(formatter) || XEUtils[formatter];
+                    if (!gFormatOpts || !XEUtils.isFunction(gFormatOpts.cellFormatMethod)) {
+                        errLog('vxe.error.notFormats', [formatter]);
+                    }
+                }
+                else if (XEUtils.isArray(formatter)) {
+                    const gFormatOpts = formats.get(formatter[0]) || XEUtils[formatter[0]];
+                    if (!gFormatOpts || !XEUtils.isFunction(gFormatOpts.cellFormatMethod)) {
+                        errLog('vxe.error.notFormats', [formatter[0]]);
+                    }
+                }
+            }
+        }
+        Object.assign(this, {
+            // 基本属性
+            type: _vm.type,
+            property: _vm.field,
+            field: _vm.field,
+            title: _vm.title,
+            width: _vm.width,
+            minWidth: _vm.minWidth,
+            maxWidth: _vm.maxWidth,
+            resizable: _vm.resizable,
+            fixed: _vm.fixed,
+            align: _vm.align,
+            headerAlign: _vm.headerAlign,
+            footerAlign: _vm.footerAlign,
+            showOverflow: _vm.showOverflow,
+            showHeaderOverflow: _vm.showHeaderOverflow,
+            showFooterOverflow: _vm.showFooterOverflow,
+            className: _vm.className,
+            headerClassName: _vm.headerClassName,
+            footerClassName: _vm.footerClassName,
+            formatter,
+            footerFormatter: _vm.footerFormatter,
+            sortable: _vm.sortable,
+            sortBy: _vm.sortBy,
+            sortType: _vm.sortType,
+            sortMethod: _vm.sortMethod,
+            remoteSort: _vm.remoteSort,
+            filters: toFilters(_vm.filters),
+            filterMultiple: XEUtils.isBoolean(_vm.filterMultiple) ? _vm.filterMultiple : true,
+            filterMethod: _vm.filterMethod,
+            filterResetMethod: _vm.filterResetMethod,
+            filterRecoverMethod: _vm.filterRecoverMethod,
+            filterRender: _vm.filterRender,
+            treeNode: _vm.treeNode,
+            cellType: _vm.cellType,
+            cellRender: _vm.cellRender,
+            editRender: _vm.editRender,
+            contentRender: _vm.contentRender,
+            headerExportMethod: _vm.headerExportMethod,
+            exportMethod: _vm.exportMethod,
+            footerExportMethod: _vm.footerExportMethod,
+            titleHelp: _vm.titleHelp,
+            titlePrefix: _vm.titlePrefix,
+            titleSuffix: _vm.titleSuffix,
+            // 自定义参数
+            params: _vm.params,
+            // 渲染属性
+            id: _vm.colId || XEUtils.uniqueId('col_'),
+            parentId: null,
+            visible,
+            // 内部属性（一旦被使用，将导致不可升级版本）
+            halfVisible: false,
+            defaultVisible: visible,
+            defaultFixed: _vm.fixed,
+            checked: false,
+            halfChecked: false,
+            disabled: false,
+            level: 1,
+            rowSpan: 1,
+            colSpan: 1,
+            // 数据排序
+            order: null,
+            sortTime: 0,
+            // 列排序
+            sortNumber: 0,
+            renderSortNumber: 0,
+            renderFixed: '',
+            renderVisible: false,
+            renderWidth: 0,
+            renderHeight: 0,
+            renderResizeWidth: 0,
+            renderAutoWidth: 0,
+            resizeWidth: 0,
+            renderLeft: 0,
+            renderArgs: [],
+            model: {},
+            renderHeader: renderHeader || _vm.renderHeader,
+            renderCell: renderCell || _vm.renderCell,
+            renderFooter: renderFooter || _vm.renderFooter,
+            renderData,
+            // 单元格插槽，只对 grid 有效
+            slots: _vm.slots
+        });
+        if (proxyOpts && proxyOpts.beforeColumn) {
+            proxyOpts.beforeColumn({ $grid: $xegrid, column: this });
+        }
+    }
+    getTitle() {
+        return getFuncText(this.title || (this.type === 'seq' ? getI18n('vxe.table.seqTitle') : ''));
+    }
+    getKey() {
+        const { type } = this;
+        return this.field || (type ? `type=${type}` : null);
+    }
+    update(name, value) {
+        // 不支持直接修改的属性
+        if (name !== 'filters') {
+            if (name === 'field') {
+                // 兼容旧属性
+                this.property = value;
+            }
+            this[name] = value;
+        }
+    }
+}

package/es/table/src/footer.js

@@ -0,0 +1,279 @@
+import XEUtils from 'xe-utils';
+import { getClass } from '../../ui/src/utils';
+import { updateCellTitle } from '../../ui/src/dom';
+const cellType = 'footer';
+function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
+    for (let mIndex = 0; mIndex < mergeFooterList.length; mIndex++) {
+        const { row: mergeRowIndex, col: mergeColIndex, rowspan: mergeRowspan, colspan: mergeColspan } = mergeFooterList[mIndex];
+        if (mergeColIndex > -1 && mergeRowIndex > -1 && mergeRowspan && mergeColspan) {
+            if (mergeRowIndex === _rowIndex && mergeColIndex === _columnIndex) {
+                return { rowspan: mergeRowspan, colspan: mergeColspan };
+            }
+            if (_rowIndex >= mergeRowIndex && _rowIndex < mergeRowIndex + mergeRowspan && _columnIndex >= mergeColIndex && _columnIndex < mergeColIndex + mergeColspan) {
+                return { rowspan: 0, colspan: 0 };
+            }
+        }
+    }
+}
+export default {
+    name: 'VxeTableFooter',
+    props: {
+        footerTableData: Array,
+        tableColumn: Array,
+        fixedColumn: Array,
+        fixedType: String,
+        size: String
+    },
+    mounted() {
+        const { $parent: $xetable, $el, $refs, fixedType } = this;
+        const { elemStore } = $xetable;
+        const prefix = `${fixedType || 'main'}-footer-`;
+        elemStore[`${prefix}wrapper`] = $el;
+        elemStore[`${prefix}table`] = $refs.table;
+        elemStore[`${prefix}colgroup`] = $refs.colgroup;
+        elemStore[`${prefix}list`] = $refs.tfoot;
+        elemStore[`${prefix}xSpace`] = $refs.xSpace;
+    },
+    destroyed() {
+        const { $parent: $xetable, fixedType } = this;
+        const { elemStore } = $xetable;
+        const prefix = `${fixedType || 'main'}-footer-`;
+        elemStore[`${prefix}wrapper`] = null;
+        elemStore[`${prefix}table`] = null;
+        elemStore[`${prefix}colgroup`] = null;
+        elemStore[`${prefix}list`] = null;
+        elemStore[`${prefix}xSpace`] = null;
+    },
+    render(h) {
+        let { _e, $parent: $xetable, fixedType, fixedColumn, tableColumn, footerTableData } = this;
+        const { $listeners: tableListeners, tId, footerRowClassName, footerCellClassName, footerRowStyle, footerCellStyle, footerAlign: allFooterAlign, mergeFooterList, footerSpanMethod, align: allAlign, scrollXLoad, columnKey, columnOpts, showFooterOverflow: allColumnFooterOverflow, currentColumn, overflowX, scrollbarWidth, tooltipOpts, visibleColumn, expandColumn } = $xetable;
+        // 如果是使用优化模式
+        if (fixedType) {
+            // 如果存在展开行使用全量渲染
+            if (!expandColumn && (scrollXLoad || allColumnFooterOverflow)) {
+                if (!mergeFooterList.length || !footerSpanMethod) {
+                    tableColumn = fixedColumn;
+                }
+                else {
+                    tableColumn = visibleColumn;
+                }
+            }
+            else {
+                tableColumn = visibleColumn;
+            }
+        }
+        return h('div', {
+            class: ['vxe-table--footer-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
+            attrs: {
+                xid: tId
+            },
+            on: {
+                scroll: this.scrollEvent
+            }
+        }, [
+            fixedType
+                ? _e()
+                : h('div', {
+                    class: 'vxe-body--x-space',
+                    ref: 'xSpace'
+                }),
+            h('table', {
+                class: 'vxe-table--footer',
+                attrs: {
+                    xid: tId,
+                    cellspacing: 0,
+                    cellpadding: 0,
+                    border: 0
+                },
+                ref: 'table'
+            }, [
+                /**
+                 * 列宽
+                 */
+                h('colgroup', {
+                    ref: 'colgroup'
+                }, tableColumn.map((column, $columnIndex) => {
+                    return h('col', {
+                        attrs: {
+                            name: column.id
+                        },
+                        key: $columnIndex
+                    });
+                }).concat(scrollbarWidth
+                    ? [
+                        h('col', {
+                            attrs: {
+                                name: 'col_gutter'
+                            }
+                        })
+                    ]
+                    : [])),
+                /**
+                 * 底部
+                 */
+                h('tfoot', {
+                    ref: 'tfoot'
+                }, footerTableData.map((list, _rowIndex) => {
+                    const $rowIndex = _rowIndex;
+                    const rowParams = { $table: $xetable, row: list, _rowIndex, $rowIndex, fixed: fixedType, type: cellType };
+                    return h('tr', {
+                        class: ['vxe-footer--row', footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''],
+                        style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
+                    }, tableColumn.map((column, $columnIndex) => {
+                        const { type, showFooterOverflow, footerAlign, align, footerClassName } = column;
+                        const showAllTip = tooltipOpts.showAll || tooltipOpts.enabled;
+                        const isColGroup = column.children && column.children.length;
+                        const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX;
+                        const footOverflow = XEUtils.isUndefined(showFooterOverflow) || XEUtils.isNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
+                        const footAlign = footerAlign || align || allFooterAlign || allAlign;
+                        let showEllipsis = footOverflow === 'ellipsis';
+                        const showTitle = footOverflow === 'title';
+                        const showTooltip = footOverflow === true || footOverflow === 'tooltip';
+                        let hasEllipsis = showTitle || showTooltip || showEllipsis;
+                        const attrs = { colid: column.id };
+                        const tfOns = {};
+                        const columnIndex = $xetable.getColumnIndex(column);
+                        const _columnIndex = $xetable.getVTColumnIndex(column);
+                        const itemIndex = _columnIndex;
+                        const cellParams = {
+                            $table: $xetable,
+                            $grid: $xetable.xegrid,
+                            row: list,
+                            _rowIndex,
+                            $rowIndex,
+                            column,
+                            columnIndex,
+                            $columnIndex,
+                            _columnIndex,
+                            itemIndex,
+                            items: list,
+                            fixed: fixedType,
+                            type: cellType,
+                            data: footerTableData
+                        };
+                        // 虚拟滚动不支持动态高度
+                        if (scrollXLoad && !hasEllipsis) {
+                            showEllipsis = hasEllipsis = true;
+                        }
+                        if (showTitle || showTooltip || showAllTip) {
+                            tfOns.mouseenter = (evnt) => {
+                                if (showTitle) {
+                                    updateCellTitle(evnt.currentTarget, column);
+                                }
+                                else if (showTooltip || showAllTip) {
+                                    $xetable.triggerFooterTooltipEvent(evnt, cellParams);
+                                }
+                            };
+                        }
+                        if (showTooltip || showAllTip) {
+                            tfOns.mouseleave = (evnt) => {
+                                if (showTooltip || showAllTip) {
+                                    $xetable.handleTargetLeaveEvent(evnt);
+                                }
+                            };
+                        }
+                        if (tableListeners['footer-cell-click']) {
+                            tfOns.click = (evnt) => {
+                                $xetable.emitEvent('footer-cell-click', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
+                            };
+                        }
+                        if (tableListeners['footer-cell-dblclick']) {
+                            tfOns.dblclick = (evnt) => {
+                                $xetable.emitEvent('footer-cell-dblclick', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
+                            };
+                        }
+                        // 合并行或列
+                        if (mergeFooterList.length) {
+                            const spanRest = mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex);
+                            if (spanRest) {
+                                const { rowspan, colspan } = spanRest;
+                                if (!rowspan || !colspan) {
+                                    return null;
+                                }
+                                if (rowspan > 1) {
+                                    attrs.rowspan = rowspan;
+                                }
+                                if (colspan > 1) {
+                                    attrs.colspan = colspan;
+                                }
+                            }
+                        }
+                        else if (footerSpanMethod) {
+                            // 自定义合并方法
+                            const { rowspan = 1, colspan = 1 } = footerSpanMethod(cellParams) || {};
+                            if (!rowspan || !colspan) {
+                                return null;
+                            }
+                            if (rowspan > 1) {
+                                attrs.rowspan = rowspan;
+                            }
+                            if (colspan > 1) {
+                                attrs.colspan = colspan;
+                            }
+                        }
+                        return h('td', {
+                            class: ['vxe-footer--column', column.id, {
+                                    [`col--${footAlign}`]: footAlign,
+                                    [`col--${type}`]: type,
+                                    'col--last': $columnIndex === tableColumn.length - 1,
+                                    'fixed--hidden': fixedHiddenColumn,
+                                    'col--ellipsis': hasEllipsis,
+                                    'col--current': currentColumn === column
+                                }, getClass(footerClassName, cellParams), getClass(footerCellClassName, cellParams)],
+                            attrs,
+                            style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle) : null,
+                            on: tfOns,
+                            key: columnKey || columnOpts.useKey ? column.id : $columnIndex
+                        }, [
+                            h('div', {
+                                class: ['vxe-cell', {
+                                        'c--title': showTitle,
+                                        'c--tooltip': showTooltip,
+                                        'c--ellipsis': showEllipsis
+                                    }]
+                            }, column.renderFooter(h, cellParams))
+                        ]);
+                    }).concat(scrollbarWidth
+                        ? [
+                            h('td', {
+                                class: 'vxe-footer--gutter col--gutter'
+                            })
+                        ]
+                        : []));
+                }))
+            ])
+        ]);
+    },
+    methods: {
+        /**
+         * 滚动处理
+         * 如果存在列固定左侧，同步更新滚动状态
+         * 如果存在列固定右侧，同步更新滚动状态
+         */
+        scrollEvent(evnt) {
+            const { $parent: $xetable, fixedType } = this;
+            const { $refs, scrollXLoad, triggerScrollXEvent, lastScrollLeft } = $xetable;
+            const { tableHeader, tableBody, tableFooter, validTip } = $refs;
+            const headerElem = tableHeader ? tableHeader.$el : null;
+            const footerElem = tableFooter ? tableFooter.$el : null;
+            const bodyElem = tableBody.$el;
+            const scrollLeft = footerElem ? footerElem.scrollLeft : 0;
+            const isX = scrollLeft !== lastScrollLeft;
+            $xetable.lastScrollLeft = scrollLeft;
+            $xetable.lastScrollTime = Date.now();
+            if (headerElem) {
+                headerElem.scrollLeft = scrollLeft;
+            }
+            if (bodyElem) {
+                bodyElem.scrollLeft = scrollLeft;
+            }
+            if (scrollXLoad && isX) {
+                triggerScrollXEvent(evnt);
+            }
+            if (isX && validTip && validTip.visible) {
+                validTip.updatePlacement();
+            }
+            $xetable.emitEvent('scroll', { type: cellType, fixed: fixedType, scrollTop: bodyElem.scrollTop, scrollLeft, isX, isY: false }, evnt);
+        }
+    }
+};

package/es/table/src/group.js

@@ -0,0 +1,11 @@
+import VxeTableColumn from './column';
+export default {
+    name: 'VxeColgroup',
+    extends: VxeTableColumn,
+    provide() {
+        return {
+            xecolgroup: this,
+            $xegrid: null
+        };
+    }
+};