diff --git a/package.json b/package.json index a8ed5aead..696ca509d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "3.8.8-beta.4", + "version": "3.8.8-beta.6", "description": "一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印导出、自定义模板、渲染器、JSON 配置式...", "scripts": { "update": "npm install --legacy-peer-deps", diff --git a/packages/custom/src/mixin.js b/packages/custom/src/mixin.js index ef1e9d1c0..2d73c102d 100644 --- a/packages/custom/src/mixin.js +++ b/packages/custom/src/mixin.js @@ -11,6 +11,7 @@ export default { const colid = column.getKey() column.renderFixed = column.fixed column.renderVisible = column.visible + column.renderResizeWidth = column.renderWidth sortMaps[colid] = column.renderSortNumber fixedMaps[colid] = column.fixed visibleMaps[colid] = column.visible @@ -36,25 +37,19 @@ export default { return this.$nextTick() }, calcMaxHeight () { - const { $refs, customStore } = this - const customWrapperElem = $refs.customWrapper ? $refs.customWrapper.$el : null - const headElem = $refs.tableHeader ? $refs.tableHeader.$el : null - const bodyElem = $refs.tableBody ? $refs.tableBody.$el : null + const { $el, customStore } = this // 判断面板不能大于表格高度 let tableHeight = 0 - if (headElem) { - tableHeight += headElem.clientHeight + if ($el) { + tableHeight = $el.clientHeight - 30 } - if (bodyElem) { - tableHeight += bodyElem.clientHeight - } - customStore.maxHeight = Math.max(0, customWrapperElem ? Math.min(customWrapperElem.clientHeight, tableHeight - 80) : 0) + customStore.maxHeight = Math.max(4, tableHeight) }, checkCustomStatus () { const { customStore, collectColumn, customOpts } = this const { checkMethod } = customOpts - customStore.isAll = collectColumn.every((column) => (checkMethod ? !checkMethod({ column }) : false) || column.visible) - customStore.isIndeterminate = !customStore.isAll && collectColumn.some((column) => (!checkMethod || checkMethod({ column })) && (column.visible || column.halfVisible)) + customStore.isAll = collectColumn.every((column) => (checkMethod ? !checkMethod({ column }) : false) || column.renderVisible) + customStore.isIndeterminate = !customStore.isAll && collectColumn.some((column) => (!checkMethod || checkMethod({ column })) && (column.renderVisible || column.halfVisible)) }, emitCustomEvent (type, evnt) { const comp = this.$xegrid || this diff --git a/packages/custom/src/panel.js b/packages/custom/src/panel.js index 0a338adb0..db27d20fb 100644 --- a/packages/custom/src/panel.js +++ b/packages/custom/src/panel.js @@ -27,7 +27,7 @@ const renderSimplePanel = (h, _vm) => { const { _e, $xetable, customStore } = _vm const { customColumnList, customOpts, isMaxFixedColumn } = $xetable const { maxHeight } = customStore - const { checkMethod, visibleMethod, allowSort, allowFixed, trigger } = customOpts + const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts const colVNs = [] const customWrapperOns = {} // hover 触发 @@ -58,7 +58,7 @@ const renderSimplePanel = (h, _vm) => { dragover: _vm.sortDragoverEvent } }, [ - h('div', { + allowVisible ? h('div', { class: ['vxe-table-custom--checkbox-option', { 'is--checked': isChecked, 'is--indeterminate': isIndeterminate, @@ -78,7 +78,7 @@ const renderSimplePanel = (h, _vm) => { h('span', { class: ['vxe-checkbox--icon', isIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)] }) - ]), + ]) : _e(), allowSort && column.level === 1 ? h('div', { class: 'vxe-table-custom--sort-option' @@ -148,9 +148,14 @@ const renderSimplePanel = (h, _vm) => { const isAllIndeterminate = customStore.isIndeterminate return h('div', { key: 'simple', - class: ['vxe-table-custom-wrapper', { + class: ['vxe-table-custom-wrapper', `placement--${placement}`, { 'is--active': customStore.visible - }] + }], + style: maxHeight && !['left', 'right'].includes(placement) + ? { + maxHeight: `${maxHeight}px` + } + : {} }, customStore.visible ? [ h('ul', { @@ -159,25 +164,28 @@ const renderSimplePanel = (h, _vm) => { h('li', { class: 'vxe-table-custom--option' }, [ - h('div', { - class: ['vxe-table-custom--checkbox-option', { - 'is--checked': isAllChecked, - 'is--indeterminate': isAllIndeterminate - }], - attrs: { - title: GlobalConfig.i18n('vxe.table.allTitle') - }, - on: { - click: _vm.allCustomEvent - } - }, [ - h('span', { - class: ['vxe-checkbox--icon', isAllIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)] - }), - h('span', { + allowVisible + ? h('div', { + class: ['vxe-table-custom--checkbox-option', { + 'is--checked': isAllChecked, + 'is--indeterminate': isAllIndeterminate + }], + attrs: { + title: GlobalConfig.i18n('vxe.table.allTitle') + }, + on: { + click: _vm.allCustomEvent + } + }, [ + h('span', { + class: ['vxe-checkbox--icon', isAllIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)] + }), + h('span', { + class: 'vxe-checkbox--label' + }, GlobalConfig.i18n('vxe.toolbar.customAll')) + ]) : h('span', { class: 'vxe-checkbox--label' - }, GlobalConfig.i18n('vxe.toolbar.customAll')) - ]) + }, GlobalConfig.i18n('vxe.table.customTitle')) ]) ]), h('div', { @@ -190,11 +198,6 @@ const renderSimplePanel = (h, _vm) => { name: 'vxe-table-custom--list', tag: 'ul' }, - style: maxHeight - ? { - maxHeight: `${maxHeight}px` - } - : {}, on: customWrapperOns }, colVNs), h('div', { @@ -235,7 +238,7 @@ const renderSimplePanel = (h, _vm) => { const renderPopupPanel = (h, _vm) => { const { _e, $xetable, customStore } = _vm const { customOpts, customColumnList, columnOpts, isMaxFixedColumn } = $xetable - const { allowSort, allowFixed, checkMethod, visibleMethod } = customOpts + const { allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts const trVNs = [] XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => { const isVisible = visibleMethod ? visibleMethod({ column }) : true @@ -260,7 +263,7 @@ const renderPopupPanel = (h, _vm) => { dragover: _vm.sortDragoverEvent } }, [ - h('td', { + allowVisible ? h('td', { class: 'vxe-table-custom-popup--column-item col--visible' }, [ h('div', { @@ -284,7 +287,7 @@ const renderPopupPanel = (h, _vm) => { class: ['vxe-checkbox--icon', isIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)] }) ]) - ]), + ]) : _e(), allowSort ? h('td', { class: 'vxe-table-custom-popup--column-item col--sort' @@ -304,7 +307,7 @@ const renderPopupPanel = (h, _vm) => { class: GlobalConfig.icon.TABLE_CUSTOM_SORT }) ]) - : null + : h('span', '-') ]) : _e(), h('td', { @@ -317,12 +320,33 @@ const renderPopupPanel = (h, _vm) => { } }, colTitle) ]), + allowResizable + ? h('td', { + class: 'vxe-table-custom-popup--column-item col--resizable' + }, [ + !isChecked || (column.children && column.children.length) + ? h('span', '-') + : h('vxe-input', { + props: { + type: 'integer', + min: 40, + value: column.renderResizeWidth + }, + on: { + modelValue (value) { + column.renderResizeWidth = Math.max(40, Number(value)) + } + } + }) + ]) + : _e(), allowFixed ? h('td', { class: 'vxe-table-custom-popup--column-item col--fixed' }, [ - !parent - ? h('vxe-radio-group', { + parent + ? h('span', '-') + : h('vxe-radio-group', { props: { value: column.renderFixed || '', type: 'button', @@ -342,7 +366,6 @@ const renderPopupPanel = (h, _vm) => { // } } }) - : null ]) : _e() ]) @@ -357,10 +380,10 @@ const renderPopupPanel = (h, _vm) => { className: 'vxe-table-custom-popup-wrapper vxe-table--ignore-clear', value: customStore.visible, title: GlobalConfig.i18n('vxe.custom.cstmTitle'), - width: '40vw', - minWidth: 520, - height: '50vh', - minHeight: 300, + width: 700, + minWidth: 700, + height: 400, + minHeight: 400, mask: true, lockView: true, showFooter: true, @@ -384,11 +407,11 @@ const renderPopupPanel = (h, _vm) => { }, [ h('table', {}, [ h('colgroup', {}, [ - h('col', { + allowVisible ? h('col', { style: { width: '80px' } - }), + }) : _e(), allowSort ? h('col', { style: { @@ -401,6 +424,13 @@ const renderPopupPanel = (h, _vm) => { minWidth: '120px' } }), + allowResizable + ? h('col', { + style: { + width: '140px' + } + }) + : _e(), allowFixed ? h('col', { style: { @@ -411,7 +441,7 @@ const renderPopupPanel = (h, _vm) => { ]), h('thead', {}, [ h('tr', {}, [ - h('th', {}, [ + allowVisible ? h('th', {}, [ h('div', { class: ['vxe-table-custom--checkbox-option', { 'is--checked': isAllChecked, @@ -432,7 +462,7 @@ const renderPopupPanel = (h, _vm) => { class: 'vxe-checkbox--label' }, GlobalConfig.i18n('vxe.toolbar.customAll')) ]) - ]), + ]) : _e(), allowSort ? h('th', {}, [ h('span', { @@ -454,6 +484,9 @@ const renderPopupPanel = (h, _vm) => { ]) : _e(), h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colTitle')), + allowResizable + ? h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colResizable')) + : _e(), allowFixed ? h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colFixed', [columnOpts.maxFixedSize || 0])) : _e() @@ -563,18 +596,34 @@ export default { updateStore({ id, type, - storeData: this.getStoreData() + storeData: $xetable.getCustomStoreData() }) } }, confirmCustomEvent (evnt) { const { $xetable } = this - const { customColumnList } = $xetable - customColumnList.forEach((column, index) => { - const sortIndex = index + 1 - column.renderSortNumber = sortIndex - column.fixed = column.renderFixed - column.visible = column.renderVisible + const { customOpts, customColumnList } = $xetable + const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts + XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => { + if (!parent) { + if (allowSort) { + const sortIndex = index + 1 + column.renderSortNumber = sortIndex + } + if (allowFixed) { + column.fixed = column.renderFixed + } + } + if (allowResizable) { + if (column.renderVisible && (!column.children || column.children.length)) { + if (column.renderResizeWidth !== column.renderWidth) { + column.resizeWidth = column.renderResizeWidth + } + } + } + if (allowVisible) { + column.visible = column.renderVisible + } }) $xetable.closeCustom() $xetable.emitCustomEvent('confirm', evnt) @@ -582,17 +631,27 @@ export default { }, cancelCustomEvent (evnt) { const { $xetable } = this - const { customStore, customColumnList } = $xetable + const { customStore, customOpts, customColumnList } = $xetable const { oldSortMaps, oldFixedMaps, oldVisibleMaps } = customStore + const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts XEUtils.eachTree(customColumnList, column => { const colid = column.getKey() const visible = !!oldVisibleMaps[colid] const fixed = oldFixedMaps[colid] || '' - column.renderVisible = visible - column.visible = visible - column.renderFixed = fixed - column.fixed = fixed - column.renderSortNumber = oldSortMaps[colid] || 0 + if (allowVisible) { + column.renderVisible = visible + column.visible = visible + } + if (allowFixed) { + column.renderFixed = fixed + column.fixed = fixed + } + if (allowSort) { + column.renderSortNumber = oldSortMaps[colid] || 0 + } + if (allowResizable) { + column.renderResizeWidth = column.renderWidth + } }, { children: 'children' }) $xetable.closeCustom() $xetable.emitCustomEvent('cancel', evnt) @@ -602,7 +661,7 @@ export default { $xetable.resetColumn(true) $xetable.closeCustom() $xetable.emitCustomEvent('reset', evnt) - this.handleSaveStore('confirm') + this.handleSaveStore('reset') }, resetCustomEvent (evnt) { if (VXETable.modal) { diff --git a/packages/locale/lang/en-US.js b/packages/locale/lang/en-US.js index 9552bdfd9..23accb03b 100644 --- a/packages/locale/lang/en-US.js +++ b/packages/locale/lang/en-US.js @@ -117,6 +117,7 @@ export default { colSort: 'Sort', sortHelpTip: 'Click and drag the icon to adjust the order of the columns.', colTitle: 'Title', + colResizable: 'Column width (px)', colVisible: 'Visible', colFixed: 'Freeze columns (Max. {0})', fixedLeft: 'Left', diff --git a/packages/locale/lang/es-ES.js b/packages/locale/lang/es-ES.js index 1ca877ffc..09185f47c 100644 --- a/packages/locale/lang/es-ES.js +++ b/packages/locale/lang/es-ES.js @@ -117,6 +117,7 @@ export default { colSort: 'Sort', sortHelpTip: 'Click and drag the icon to adjust the order of the columns.', colTitle: 'Title', + colResizable: 'Column width (px)', colVisible: 'Visible', colFixed: 'Freeze columns (Max {0})', fixedLeft: 'Left', diff --git a/packages/locale/lang/ja-JP.js b/packages/locale/lang/ja-JP.js index 2d0b3642b..1b8c11502 100644 --- a/packages/locale/lang/ja-JP.js +++ b/packages/locale/lang/ja-JP.js @@ -117,6 +117,7 @@ export default { colSort: 'ソート', sortHelpTip: 'Click and drag the icon to adjust the order of the columns.', colTitle: 'タイトル', + colResizable: 'Column width (px)', colVisible: '表示', colFixed: '冻结列（最多 {0} 列）', fixedLeft: '左側', diff --git a/packages/locale/lang/pt-BR.js b/packages/locale/lang/pt-BR.js index a92379b00..2a8f4fa3e 100644 --- a/packages/locale/lang/pt-BR.js +++ b/packages/locale/lang/pt-BR.js @@ -117,6 +117,7 @@ export default { colSort: 'Sort', sortHelpTip: 'Click and drag the icon to adjust the order of the columns.', colTitle: 'Title', + colResizable: 'Column width (px)', colVisible: 'Visible', colFixed: 'Freeze columns (Max {0})', fixedLeft: 'Left', diff --git a/packages/locale/lang/zh-CN.js b/packages/locale/lang/zh-CN.js index 04b772f6d..9fbd6f604 100644 --- a/packages/locale/lang/zh-CN.js +++ b/packages/locale/lang/zh-CN.js @@ -117,6 +117,7 @@ export default { colSort: '排序', sortHelpTip: '点击并拖动图标可以调整列的排序', colTitle: '标题', + colResizable: '列宽（像素）', colVisible: '是否显示', colFixed: '冻结列（最多 {0} 列）', fixedLeft: '左侧', diff --git a/packages/locale/lang/zh-TC.js b/packages/locale/lang/zh-TC.js index 8d140a4e8..f6255c8e9 100644 --- a/packages/locale/lang/zh-TC.js +++ b/packages/locale/lang/zh-TC.js @@ -117,6 +117,7 @@ export default { colSort: '排序', sortHelpTip: '點擊並拖動圖標可以調整列的排序', colTitle: '標題', + colResizable: '列宽（像素）', colVisible: '是否顯示', colFixed: '冻结列（最多 {0} 列）', fixedLeft: '左側', diff --git a/packages/pager/src/pager.js b/packages/pager/src/pager.js index fcd2bf3ff..447776212 100644 --- a/packages/pager/src/pager.js +++ b/packages/pager/src/pager.js @@ -34,6 +34,10 @@ export default { autoHidden: { type: Boolean, default: () => GlobalConfig.pager.autoHidden }, transfer: { type: Boolean, default: () => GlobalConfig.pager.transfer }, className: [String, Function], + pageSizePlacement: { + type: String, + default: () => GlobalConfig.pager.pageSizePlacement + }, // 自定义图标 iconPrevPage: String, iconJumpPrev: String, @@ -271,7 +275,7 @@ export default { class: 'vxe-pager--sizes', props: { value: this.pageSize, - placement: 'top', + placement: this.pageSizePlacement, transfer: this.transfer, options: this.sizeList }, diff --git a/packages/table/src/body.js b/packages/table/src/body.js index 7dd467a76..ca092690c 100644 --- a/packages/table/src/body.js +++ b/packages/table/src/body.js @@ -389,7 +389,7 @@ function renderRows (h, _vm, $xetable, fixedType, tableData, tableColumn) { ) // 如果行被展开了 if (isExpandRow) { - const { height: expandHeight } = expandOpts + const { height: expandHeight, padding } = expandOpts const cellStyle = {} if (expandHeight) { cellStyle.height = `${expandHeight}px` @@ -402,7 +402,9 @@ function renderRows (h, _vm, $xetable, fixedType, tableData, tableColumn) { const expandParams = { $table: $xetable, seq, column: expandColumn, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex } rows.push( h('tr', { - class: 'vxe-body--expanded-row', + class: ['vxe-body--expanded-row', { + 'is--padding': padding + }], key: `expand_${rowid}`, style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(expandParams) : rowStyle) : null, on: trOn diff --git a/packages/table/src/columnInfo.js b/packages/table/src/columnInfo.js index 0d97566f5..d2e3b76db 100644 --- a/packages/table/src/columnInfo.js +++ b/packages/table/src/columnInfo.js @@ -126,7 +126,9 @@ export class ColumnInfo { renderWidth: 0, renderHeight: 0, + renderResizeWidth: 0, resizeWidth: 0, + renderLeft: 0, renderArgs: [], // 渲染参数可用于扩展 model: {}, diff --git a/packages/table/src/methods.js b/packages/table/src/methods.js index c43edfd14..ca4bf17b7 100644 --- a/packages/table/src/methods.js +++ b/packages/table/src/methods.js @@ -1596,6 +1596,7 @@ const Methods = { if (!checkMethod || checkMethod({ column })) { column.visible = column.defaultVisible } + column.renderResizeWidth = column.renderWidth }) if (opts.resizable) { this.saveCustomResizable(true) @@ -1798,6 +1799,61 @@ const Methods = { localStorage.setItem(visibleStorageKey, XEUtils.toJSONString(columnVisibleStorageMap)) } }, + getCustomStoreData () { + const { id, collectColumn, customOpts } = this + const { checkMethod } = customOpts + const resizableData = {} + const sortData = {} + const visibleData = {} + const fixedData = {} + const storeData = { + resizableData, + sortData, + visibleData, + fixedData + } + if (!id) { + errLog('vxe.error.reqProp', ['id']) + return storeData + } + XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => { + // 排序只支持一级 + if (!parent) { + collectColumn.forEach((column) => { + const colKey = column.getKey() + if (colKey) { + sortData[colKey] = column.renderSortNumber + } + }) + } + if (column.resizeWidth) { + const colKey = column.getKey() + if (colKey) { + resizableData[colKey] = column.renderWidth + } + } + if (column.fixed && column.fixed !== column.defaultFixed) { + const colKey = column.getKey() + if (colKey) { + fixedData[colKey] = column.fixed + } + } + if (!checkMethod || checkMethod({ column })) { + if (!column.visible && column.defaultVisible) { + const colKey = column.getKey() + if (colKey) { + visibleData[colKey] = false + } + } else if (column.visible && !column.defaultVisible) { + const colKey = column.getKey() + if (colKey) { + visibleData[colKey] = true + } + } + } + }) + return storeData + }, saveCustomResizable (isReset) { const { id, collectColumn, customConfig, customOpts } = this const { storage } = customOpts diff --git a/packages/v-x-e-table/src/conf.js b/packages/v-x-e-table/src/conf.js index 8fe8ba1d4..85d53e116 100644 --- a/packages/v-x-e-table/src/conf.js +++ b/packages/v-x-e-table/src/conf.js @@ -59,9 +59,12 @@ export default { // visibleMethod () {} // }, customConfig: { + allowVisible: true, + allowResizable: true, allowFixed: true, allowSort: true, - showFooter: true + showFooter: true, + placement: 'topRight' // storage: false, // checkMethod () {} }, @@ -273,6 +276,7 @@ export default { leaveDelay: 300 }, pager: { + pageSizePlacement: 'top' // size: null, // autoHidden: false, // perfect: true, diff --git a/styles/custom.scss b/styles/custom.scss index b66f05a7e..a8f813488 100644 --- a/styles/custom.scss +++ b/styles/custom.scss @@ -53,6 +53,7 @@ .vxe-table-custom-wrapper { display: none; + flex-direction: column; position: absolute; top: 1px; right: 2px; @@ -62,25 +63,53 @@ border: 1px solid $vxe-table-border-color; border-radius: $vxe-border-radius; box-shadow: $vxe-base-popup-box-shadow; + &.placement--top-left { + top: 2px; + left: 2px; + } + &.placement--top-right { + top: 2px; + right: 2px; + } + &.placement--bottom-left { + bottom: 2px; + left: 2px; + } + &.placement--bottom-right { + bottom: 2px; + right: 2px; + } + &.placement--left { + left: 2px; + } + &.placement--right { + right: 2px; + } + &.placement--left, + &.placement--right { + top: 2px; + height: calc(100% - 4px); + } &.is--active { - display: block; + display: flex; } } .vxe-table-custom--list-wrapper { display: block; + flex-grow: 1; + overflow-x: hidden; + overflow-y: auto; } .vxe-table-custom--header, .vxe-table-custom--body { list-style-type: none; - overflow-x: hidden; - overflow-y: auto; margin: 0; padding: 0; & > li { max-width: 26em; - min-width: 18em; + min-width: 17em; padding: 0.2em 1em 0.2em 1em; @for $i from 2 through 8 { $interval: $i - 1 + 0.2; @@ -95,6 +124,7 @@ } .vxe-table-custom--header { + flex-shrink: 0; padding: 0.28em 0; font-weight: 700; border-bottom: 1px solid $vxe-table-popup-border-color; @@ -103,7 +133,6 @@ .vxe-table-custom--body { padding: 0.2em 0; - max-height: 20em; .vxe-table-custom--checkbox-option { &:hover { background-color: $vxe-table-row-hover-background-color; @@ -114,6 +143,7 @@ .vxe-table-custom--footer { display: flex; flex-direction: row; + flex-shrink: 0; border-top: 1px solid $vxe-table-popup-border-color; text-align: right; button { @@ -276,9 +306,15 @@ position: relative; &.col--sort, &.col--visible, + &.col--resizable, &.col--fixed { text-align: center; } + &.col--resizable { + & > .vxe-input { + width: 100%; + } + } } .vxe-table-custom-popup--row { diff --git a/styles/table.scss b/styles/table.scss index cc8d10b2d..423ab0532 100644 --- a/styles/table.scss +++ b/styles/table.scss @@ -1032,8 +1032,18 @@ padding-left: 0.5em; } } + .vxe-body--expanded-row { + &.is--padding { + & > .vxe-body--expanded-column { + & > .vxe-body--expanded-cell { + padding: $vxe-table-expand-padding-default; + } + } + } + } .vxe-body--expanded-column { border-bottom: $vxe-table-border-width solid $vxe-table-border-color; + border-right: $vxe-table-border-width solid $vxe-table-border-color; &.col--ellipsis { & > .vxe-body--expanded-cell { overflow: hidden; diff --git a/styles/variable.scss b/styles/variable.scss index 9dad0ff6c..9948f6d2e 100644 --- a/styles/variable.scss +++ b/styles/variable.scss @@ -113,6 +113,8 @@ $vxe-table-cell-extend-area-border-color: $vxe-table-cell-area-border-color !def $vxe-table-cell-active-area-border-color: $vxe-table-cell-area-border-color !default; $vxe-table-cell-area-background-color: rgba(64,158,255,0.2) !default; +$vxe-table-expand-padding-default: 16px !default; + $vxe-table-checkbox-range-border-width: 1px !default; $vxe-table-checkbox-range-border-color: #006af1 !default; $vxe-table-checkbox-range-background-color: rgba(50,128,252,0.2) !default;