vxe-gantt 3.0.0-beta.0 → 3.0.0-beta.2

package/es/gantt/src/gantt-body.js

@@ -20,47 +20,87 @@ export default defineVxeComponent({
         //
         // Render
         //
-        renderRows(h) {
+        renderColumn(h, $xeTable, row, rowid, $rowIndex, column, $columnIndex) {
             const _vm = this;
             const $xeGantt = _vm.$xeGantt;
+            const tableInternalData = $xeTable;
+            const { fullAllDataRowIdData } = tableInternalData;
+            const cellOpts = $xeTable.computeCellOpts;
+            const rowOpts = $xeTable.computeRowOpts;
+            const defaultRowHeight = $xeTable.computeDefaultRowHeight;
+            const rowRest = fullAllDataRowIdData[rowid] || {};
+            const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
+            return h('td', {
+                key: $columnIndex,
+                class: 'vxe-gantt-view--body-column',
+                style: {
+                    height: `${cellHeight}px`
+                },
+                on: {
+                    click(evnt) {
+                        $xeGantt.handleTaskCellClickEvent(evnt, { row, column });
+                    },
+                    dblclick(evnt) {
+                        $xeGantt.handleTaskCellDblclickEvent(evnt, { row, column });
+                    }
+                }
+            });
+        },
+        renderRows(h, $xeTable, tableData) {
+            const _vm = this;
             const $xeGanttView = _vm.$xeGanttView;
-            const $xeTable = $xeGanttView.internalData.xeTable;
-            const tableInternalData = ($xeTable ? $xeTable : {});
-            const fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData || {};
-            let cellOpts = {};
-            let rowOpts = {};
-            let defaultRowHeight = 0;
-            if ($xeTable) {
-                cellOpts = $xeTable.computeCellOpts;
-                rowOpts = $xeTable.computeRowOpts;
-                defaultRowHeight = $xeTable.computeDefaultRowHeight;
-            }
             const { reactData } = $xeGanttView;
-            const { tableData, tableColumn } = reactData;
+            const tableProps = $xeTable;
+            const { treeConfig, stripe, highlightHoverRow } = tableProps;
+            const tableReactData = $xeTable;
+            const { treeExpandedFlag } = tableReactData;
+            const tableInternalData = $xeTable;
+            const { fullAllDataRowIdData, treeExpandedMaps } = tableInternalData;
+            const rowOpts = $xeTable.computeRowOpts;
+            const treeOpts = $xeTable.computeTreeOpts;
+            const { transform } = treeOpts;
+            const childrenField = treeOpts.children || treeOpts.childrenField;
+            const { tableColumn, scrollYLoad } = reactData;
             const trVNs = [];
-            tableData.forEach((row, rIndex) => {
-                const rowid = $xeTable ? $xeTable.getRowid(row) : '';
+            tableData.forEach((row, $rowIndex) => {
+                const rowid = $xeTable.getRowid(row);
                 const rowRest = fullAllDataRowIdData[rowid] || {};
-                const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
+                const trOns = {};
+                let rowIndex = $rowIndex;
+                let _rowIndex = -1;
+                if (rowRest) {
+                    rowIndex = rowRest.index;
+                    _rowIndex = rowRest._index;
+                }
+                // 当前行事件
+                if (rowOpts.isHover || highlightHoverRow) {
+                    trOns.mouseenter = (evnt) => {
+                        $xeTable.triggerHoverEvent(evnt, { row, rowIndex });
+                    };
+                    trOns.mouseleave = () => {
+                        $xeTable.clearHoverRow();
+                    };
+                }
                 trVNs.push(h('tr', {
-                    key: rIndex
-                }, tableColumn.map((column, cIndex) => {
-                    return h('td', {
-                        key: cIndex,
-                        class: 'vxe-gantt-view--body-column',
-                        style: {
-                            height: `${cellHeight}px`
-                        },
-                        on: {
-                            click(evnt) {
-                                $xeGantt.handleTaskCellClickEvent(evnt, { row });
-                            },
-                            dblclick(evnt) {
-                                $xeGantt.handleTaskCellDblclickEvent(evnt, { row });
-                            }
-                        }
-                    });
-                })));
+                    key: treeConfig ? rowid : $rowIndex,
+                    class: ['vxe-gantt-view--body-row', {
+                            'row--stripe': stripe && (_rowIndex + 1) % 2 === 0
+                        }],
+                    attrs: {
+                        rowid
+                    },
+                    on: trOns
+                }, tableColumn.map((column, $columnIndex) => _vm.renderColumn(h, $xeTable, row, rowid, $rowIndex, column, $columnIndex))));
+                let isExpandTree = false;
+                let rowChildren = [];
+                if (treeConfig && !scrollYLoad && !transform) {
+                    rowChildren = row[childrenField];
+                    isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid];
+                }
+                // 如果是树形表格
+                if (isExpandTree) {
+                    trVNs.push(..._vm.renderRows(h, $xeTable, rowChildren));
+                }
             });
             return trVNs;
         },
@@ -68,7 +108,8 @@ export default defineVxeComponent({
             const _vm = this;
             const $xeGanttView = _vm.$xeGanttView;
             const { reactData } = $xeGanttView;
-            const { tableColumn, viewCellWidth } = reactData;
+            const $xeTable = $xeGanttView.internalData.xeTable;
+            const { tableData, tableColumn, viewCellWidth } = reactData;
             return h('div', {
                 ref: 'refElem',
                 class: 'vxe-gantt-view--body-wrapper'
@@ -100,7 +141,7 @@ export default defineVxeComponent({
                                 }
                             });
                         })),
-                        h('tbody', {}, _vm.renderRows(h))
+                        h('tbody', {}, $xeTable ? _vm.renderRows(h, $xeTable, tableData) : [])
                     ]),
                     h(GanttViewChartComponent)
                 ])

package/es/gantt/src/gantt-chart.js

@@ -23,84 +23,111 @@ export default defineVxeComponent({
         //
         // Render
         //
-        renderVN(h) {
+        renderTaskBar(h, $xeTable, row, rowid, $rowIndex) {
             const _vm = this;
             const $xeGantt = _vm.$xeGantt;
-            const $xeGanttView = _vm.$xeGanttView;
-            const $xeTable = $xeGanttView.internalData.xeTable;
-            const tableInternalData = ($xeTable ? $xeTable : {});
-            const fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData || {};
-            let cellOpts = {};
-            let rowOpts = {};
-            let defaultRowHeight = 0;
-            if ($xeTable) {
-                cellOpts = $xeTable.computeCellOpts;
-                rowOpts = $xeTable.computeRowOpts;
-                defaultRowHeight = $xeTable.computeDefaultRowHeight;
-            }
-            const { reactData } = $xeGanttView;
-            const { tableData } = reactData;
+            const tableProps = $xeTable;
+            const { treeConfig } = tableProps;
+            const tableInternalData = $xeTable;
+            const { fullAllDataRowIdData } = tableInternalData;
+            const cellOpts = $xeTable.computeCellOpts;
+            const rowOpts = $xeTable.computeRowOpts;
+            const defaultRowHeight = $xeTable.computeDefaultRowHeight;
             const titleField = $xeGantt.computeTitleField;
             const progressField = $xeGantt.computeProgressField;
             const taskBarOpts = $xeGantt.computeTaskBarOpts;
             const { showProgress, showContent, contentMethod, barStyle } = taskBarOpts;
             const { round } = barStyle || {};
-            const trVNs = [];
-            tableData.forEach((row, rIndex) => {
-                const rowid = $xeTable ? $xeTable.getRowid(row) : '';
-                const rowRest = fullAllDataRowIdData[rowid] || {};
-                const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
-                let title = getStringValue(XEUtils.get(row, titleField));
-                const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0;
-                if (contentMethod) {
-                    title = getStringValue(contentMethod({ row, title }));
+            const rowRest = fullAllDataRowIdData[rowid] || {};
+            const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
+            let title = getStringValue(XEUtils.get(row, titleField));
+            const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0;
+            if (contentMethod) {
+                title = getStringValue(contentMethod({ row, title }));
+            }
+            return h('div', {
+                key: treeConfig ? rowid : $rowIndex,
+                attrs: {
+                    rowid
+                },
+                class: ['vxe-gantt-view--chart-row', {
+                        'is--round': round
+                    }],
+                style: {
+                    height: `${cellHeight}px`
                 }
-                trVNs.push(h('div', {
-                    key: rIndex,
+            }, [
+                h('div', {
+                    class: 'vxe-gantt-view--chart-bar',
                     attrs: {
                         rowid
                     },
-                    class: ['vxe-gantt-view--chart-row', {
-                            'is--round': round
-                        }],
-                    style: {
-                        height: `${cellHeight}px`
+                    on: {
+                        click(evnt) {
+                            $xeGantt.handleTaskBarClickEvent(evnt, { row });
+                        },
+                        dblclick(evnt) {
+                            $xeGantt.handleTaskBarDblclickEvent(evnt, { row });
+                        }
                     }
                 }, [
-                    h('div', {
-                        class: 'vxe-gantt-view--chart-bar',
-                        attrs: {
-                            rowid
-                        },
-                        on: {
-                            click(evnt) {
-                                $xeGantt.handleTaskBarClickEvent(evnt, { row });
-                            },
-                            dblclick(evnt) {
-                                $xeGantt.handleTaskBarDblclickEvent(evnt, { row });
+                    showProgress
+                        ? h('div', {
+                            class: 'vxe-gantt-view--chart-progress',
+                            style: {
+                                width: `${progressValue || 0}%`
                             }
-                        }
-                    }, [
-                        showProgress
-                            ? h('div', {
-                                class: 'vxe-gantt-view--chart-progress',
-                                style: {
-                                    width: `${progressValue || 0}%`
-                                }
-                            })
-                            : renderEmptyElement($xeGantt),
-                        showContent
-                            ? h('div', {
-                                class: 'vxe-gantt-view--chart-content'
-                            }, title)
-                            : renderEmptyElement($xeGantt)
-                    ])
-                ]));
+                        })
+                        : renderEmptyElement($xeGantt),
+                    showContent
+                        ? h('div', {
+                            class: 'vxe-gantt-view--chart-content'
+                        }, title)
+                        : renderEmptyElement($xeGantt)
+                ])
+            ]);
+        },
+        renderRows(h, $xeTable, tableData) {
+            const _vm = this;
+            const $xeGanttView = _vm.$xeGanttView;
+            const { reactData } = $xeGanttView;
+            const tableProps = $xeTable;
+            const { treeConfig } = tableProps;
+            const tableReactData = $xeTable;
+            const { treeExpandedFlag } = tableReactData;
+            const tableInternalData = $xeTable;
+            const { treeExpandedMaps } = tableInternalData;
+            const treeOpts = $xeTable.computeTreeOpts;
+            const { transform } = treeOpts;
+            const childrenField = treeOpts.children || treeOpts.childrenField;
+            const { scrollYLoad } = reactData;
+            const trVNs = [];
+            tableData.forEach((row, $rowIndex) => {
+                const rowid = $xeTable ? $xeTable.getRowid(row) : '';
+                trVNs.push(_vm.renderTaskBar(h, $xeTable, row, rowid, $rowIndex));
+                let isExpandTree = false;
+                let rowChildren = [];
+                if (treeConfig && !scrollYLoad && !transform) {
+                    rowChildren = row[childrenField];
+                    isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid];
+                }
+                // 如果是树形表格
+                if (isExpandTree) {
+                    trVNs.push(..._vm.renderRows(h, $xeTable, rowChildren));
+                }
             });
+            return trVNs;
+        },
+        renderVN(h) {
+            const _vm = this;
+            const $xeGanttView = _vm.$xeGanttView;
+            const { reactData } = $xeGanttView;
+            const $xeTable = $xeGanttView.internalData.xeTable;
+            const { tableData } = reactData;
             return h('div', {
                 ref: 'refElem',
                 class: 'vxe-gantt-view--chart-wrapper'
-            }, trVNs);
+            }, $xeTable ? _vm.renderRows(h, $xeTable, tableData) : []);
         }
     },
     mounted() {

package/es/gantt/src/gantt-view.js

@@ -1,6 +1,6 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import { VxeUI } from '@vxe-ui/core';
-import { setScrollTop, setScrollLeft } from '../../ui/src/dom';
+import { setScrollTop, setScrollLeft, removeClass, addClass } from '../../ui/src/dom';
 import { getRefElem } from './util';
 import XEUtils from 'xe-utils';
 import GanttViewHeaderComponent from './gantt-header';
@@ -41,6 +41,8 @@ function handleParseColumn($xeGanttView) {
     const $xeGantt = $xeGanttView.$xeGantt;
     const reactData = $xeGanttView.reactData;
     const internalData = $xeGanttView.internalData;
+    const ganttProps = $xeGantt;
+    const { treeConfig } = ganttProps;
     const { minViewDate, maxViewDate } = reactData;
     const taskViewOpts = $xeGantt.computeTaskViewOpts;
     const fullCols = [];
@@ -93,9 +95,12 @@ function handleParseColumn($xeGanttView) {
                     const startField = $xeGantt.computeStartField;
                     const endField = $xeGantt.computeEndField;
                     const tableInternalData = $xeTable;
-                    const { afterFullData } = tableInternalData;
+                    const { afterFullData, afterTreeFullData } = tableInternalData;
+                    const treeOpts = $xeTable.computeTreeOpts;
+                    const { transform } = treeOpts;
+                    const childrenField = treeOpts.children || treeOpts.childrenField;
                     const ctMaps = {};
-                    afterFullData.forEach(row => {
+                    const handleParseRender = (row) => {
                         const rowid = $xeTable.getRowid(row);
                         const startValue = XEUtils.get(row, startField);
                         const endValue = XEUtils.get(row, endField);
@@ -111,7 +116,13 @@ function handleParseColumn($xeGanttView) {
                                 oWidthSize
                             };
                         }
-                    });
+                    };
+                    if (treeConfig) {
+                        XEUtils.eachTree(afterTreeFullData, handleParseRender, { children: transform ? treeOpts.mapChildrenField : childrenField });
+                    }
+                    else {
+                        afterFullData.forEach(handleParseRender);
+                    }
                     internalData.chartMaps = ctMaps;
                 }
             }
@@ -125,6 +136,8 @@ function handleUpdateData($xeGanttView) {
     const $xeGantt = $xeGanttView.$xeGantt;
     const reactData = $xeGanttView.reactData;
     const internalData = $xeGanttView.internalData;
+    const ganttProps = $xeGantt;
+    const { treeConfig } = ganttProps;
     const $xeTable = internalData.xeTable;
     const sdMaps = {};
     const edMaps = {};
@@ -134,8 +147,11 @@ function handleUpdateData($xeGanttView) {
         const startField = $xeGantt.computeStartField;
         const endField = $xeGantt.computeEndField;
         const tableInternalData = $xeTable;
-        const { afterFullData } = tableInternalData;
-        afterFullData.forEach(row => {
+        const { afterFullData, afterTreeFullData } = tableInternalData;
+        const treeOpts = $xeTable.computeTreeOpts;
+        const { transform } = treeOpts;
+        const childrenField = treeOpts.children || treeOpts.childrenField;
+        const handleMinMaxData = (row) => {
             const startValue = XEUtils.get(row, startField);
             const endValue = XEUtils.get(row, endField);
             if (startValue && endValue) {
@@ -148,7 +164,13 @@ function handleUpdateData($xeGanttView) {
                     maxDate = endDate;
                 }
             }
-        });
+        };
+        if (treeConfig) {
+            XEUtils.eachTree(afterTreeFullData, handleMinMaxData, { children: transform ? treeOpts.mapChildrenField : childrenField });
+        }
+        else {
+            afterFullData.forEach(handleMinMaxData);
+        }
     }
     reactData.minViewDate = minDate;
     reactData.maxViewDate = maxDate;
@@ -303,6 +325,7 @@ function updateStyle($xeGanttView) {
 function handleLazyRecalculate($xeGanttView) {
     calcScrollbar($xeGanttView);
     updateStyle($xeGanttView);
+    updateChart($xeGanttView);
     return $xeGanttView.$nextTick();
 }
 function updateScrollXSpace($xeGanttView) {
@@ -547,6 +570,39 @@ export default defineVxeComponent({
             const $xeGanttView = this;
             return handleLazyRecalculate($xeGanttView);
         },
+        handleUpdateCurrentRow(row) {
+            const $xeGanttView = this;
+            const internalData = $xeGanttView.internalData;
+            const $xeTable = internalData.xeTable;
+            const el = $xeGanttView.$refs.refElem;
+            if ($xeTable && el) {
+                if (row) {
+                    const tableProps = $xeTable;
+                    const { highlightCurrentRow } = tableProps;
+                    const rowOpts = $xeTable.computeRowOpts;
+                    if (rowOpts.isCurrent || highlightCurrentRow) {
+                        XEUtils.arrayEach(el.querySelectorAll(`[rowid="${$xeTable.getRowid(row)}"]`), elem => addClass(elem, 'row--current'));
+                    }
+                }
+                else {
+                    XEUtils.arrayEach(el.querySelectorAll('.row--current'), elem => removeClass(elem, 'row--current'));
+                }
+            }
+        },
+        handleUpdateHoverRow(row) {
+            const $xeGanttView = this;
+            const internalData = $xeGanttView.internalData;
+            const $xeTable = internalData.xeTable;
+            const el = $xeGanttView.$refs.refElem;
+            if ($xeTable && el) {
+                if (row) {
+                    XEUtils.arrayEach(el.querySelectorAll(`.vxe-body--row[rowid="${$xeTable.getRowid(row)}"]`), elem => addClass(elem, 'row--hover'));
+                }
+                else {
+                    XEUtils.arrayEach(el.querySelectorAll('.vxe-body--row.row--hover'), elem => removeClass(elem, 'row--hover'));
+                }
+            }
+        },
         triggerHeaderScrollEvent(evnt) {
             const $xeGanttView = this;
             const internalData = $xeGanttView.internalData;

package/es/gantt/src/gantt.js

@@ -234,7 +234,12 @@ export default {
             const proxyOpts = $xeGantt.computeProxyOpts;
             const pagerOpts = $xeGantt.computePagerOpts;
             const isLoading = $xeGantt.computeIsLoading;
-            const tProps = Object.assign({}, tableExtendProps);
+            const tProps = Object.assign({}, tableExtendProps, {
+                showOverflow: true,
+                showHeaderOverflow: true,
+                showFooterOverflow: true,
+                showFooter: false
+            });
             if (isZMax) {
                 if (tableExtendProps.maxHeight) {
                     tProps.maxHeight = '100%';
@@ -1368,6 +1373,21 @@ export default {
         },
         handleTaskCellClickEvent(evnt, params) {
             const $xeGantt = this;
+            const $xeTable = $xeGantt.$refs.refTable;
+            if ($xeTable) {
+                const tableProps = $xeTable;
+                const { highlightCurrentRow } = tableProps;
+                const rowOpts = $xeTable.computeRowOpts;
+                const { row } = params;
+                // 如果是当前行
+                if (rowOpts.isCurrent || highlightCurrentRow) {
+                    $xeTable.triggerCurrentRowEvent(evnt, Object.assign({
+                        $table: $xeTable,
+                        rowIndex: $xeTable.getRowIndex(row),
+                        $rowIndex: $xeTable.getVMRowIndex(row)
+                    }, params));
+                }
+            }
             $xeGantt.dispatchEvent('task-cell-click', params, evnt);
         },
         handleTaskCellDblclickEvent(evnt, params) {
@@ -1560,9 +1580,8 @@ export default {
             const slots = $xeGantt.$scopedSlots;
             const { toolbarConfig } = props;
             const toolbarSlot = slots.toolbar;
-            const hasToolbar = !!(toolbarSlot || isEnableConf(toolbarConfig) || toolbar);
             const toolbarOpts = $xeGantt.computeToolbarOpts;
-            if (hasToolbar) {
+            if ((toolbarConfig && isEnableConf(toolbarOpts)) || toolbarSlot) {
                 return h('div', {
                     key: 'toolbar',
                     ref: 'refToolbarWrapper',
@@ -1695,18 +1714,19 @@ export default {
             if (!enabled) {
                 return renderEmptyElement($xeGantt);
             }
+            const isResize = resize && showLeftView && showRightView;
             const ons = {};
-            if (resize) {
+            if (isResize) {
                 ons.mousedown = $xeGantt.dragSplitEvent;
             }
             return h('div', {
                 class: ['vxe-gantt--view-split-bar', {
-                        'is--resize': resize,
-                        on: ons
+                        'is--resize': isResize
                     }]
             }, [
                 h('div', {
-                    class: 'vxe-gantt--view-split-bar-handle'
+                    class: 'vxe-gantt--view-split-bar-handle',
+                    on: ons
                 }),
                 showCollapseTableButton || showCollapseTaskButton
                     ? h('div', {

package/es/gantt/style.css

@@ -40,6 +40,7 @@
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.1);
+  pointer-events: none;
 }
 
 .vxe-gantt-view--chart-progress {
@@ -188,9 +189,6 @@
   border: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
 }
 
-.vxe-gantt.border--default .vxe-gantt-view--header-wrapper, .vxe-gantt.border--full .vxe-gantt-view--header-wrapper, .vxe-gantt.border--outer .vxe-gantt-view--header-wrapper {
-  background-color: var(--vxe-ui-table-header-background-color);
-}
 .vxe-gantt.border--full .vxe-gantt-view--header-column,
 .vxe-gantt.border--full .vxe-gantt-view--body-column,
 .vxe-gantt.border--full .vxe-gantt-view--footer-column {
@@ -271,6 +269,22 @@
   width: calc(100% + var(--vxe-ui-table-border-width));
   border-left: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
 }
+.vxe-gantt.border--default .vxe-gantt-view--header-column,
+.vxe-gantt.border--default .vxe-gantt-view--body-column,
+.vxe-gantt.border--default .vxe-gantt-view--footer-column, .vxe-gantt.border--inner .vxe-gantt-view--header-column,
+.vxe-gantt.border--inner .vxe-gantt-view--body-column,
+.vxe-gantt.border--inner .vxe-gantt-view--footer-column {
+  background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
+  background-repeat: no-repeat;
+  background-size: 100% var(--vxe-ui-table-border-width);
+  background-position: right bottom;
+}
+.vxe-gantt.border--inner .vxe-gantt--border-line {
+  border-width: 0 0 1px 0;
+}
+.vxe-gantt.border--none .vxe-gantt--border-line {
+  display: none;
+}
 
 /*分割条*/
 .vxe-gantt--view-split-bar {
@@ -547,10 +561,6 @@
   float: left;
 }
 
-.vxe-gantt-view--header-table {
-  height: 100%;
-}
-
 .vxe-gantt-view--header-table,
 .vxe-gantt-view--body-table {
   border: 0;
@@ -563,6 +573,10 @@
   width: var(--vxe-ui-gantt-view-default-cell-width);
 }
 
+.vxe-gantt-view--header-wrapper {
+  background-color: var(--vxe-ui-table-header-background-color);
+}
+
 .vxe-gantt-view--header-wrapper,
 .vxe-gantt-view--body-wrapper {
   overflow: hidden;
@@ -593,10 +607,6 @@
   font-size: 1em;
 }
 
-.vxe-gantt-view--body-column {
-  height: 48px;
-}
-
 .vxe-gantt-view--header-column,
 .vxe-gantt-view--body-column,
 .vxe-gantt-view--footer-column {
@@ -606,6 +616,22 @@
   white-space: nowrap;
 }
 
+.vxe-gantt-view--body-row.row--stripe {
+  background-color: var(--vxe-ui-table-row-striped-background-color);
+}
+.vxe-gantt-view--body-row.row--current {
+  background-color: var(--vxe-ui-table-row-current-background-color);
+}
+.vxe-gantt-view--body-row.row--hover {
+  background-color: var(--vxe-ui-table-row-hover-background-color);
+}
+.vxe-gantt-view--body-row.row--hover.row--stripe {
+  background-color: var(--vxe-ui-table-row-hover-striped-background-color);
+}
+.vxe-gantt-view--body-row.row--hover.row--current {
+  background-color: var(--vxe-ui-table-row-hover-current-background-color);
+}
+
 .vxe-gantt-view.mode--day .vxe-gantt-view--header-column {
   height: 50%;
 }