增加参数 expand-config.padding

2026-01-21 05:27:57 +08:00 · 2024-06-09 17:28:16 +08:00
parent d95fe776dc
commit fbad0bf5c0
17 changed files with 255 additions and 79 deletions
--- 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",
--- 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
--- 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) {
--- 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',
--- 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',
--- 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: '左側',
--- 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',
--- 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: '左侧',
--- 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: '左側',
--- 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
        },
--- 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
--- 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: {},
--- 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
--- 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,
--- 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 {
--- 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;
--- 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;