update

2025-11-06 11:20:40 +08:00 · 2019-04-28 19:48:46 +08:00
parent d23a5ff96d
commit 2ddb07f4ab
13 changed files with 37 additions and 30 deletions
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ A very powerful Vue table component.
 * [带边框](https://jsrun.net/QrXKp/play)
 * [单元格样式](https://jsrun.net/EmXKp/play)
 * [列宽拖动](https://jsrun.net/5AXKp/play)
-* 流体高度
+* [流体高度](https://jsrun.net/smXKp/play)
 * [固定表头](https://jsrun.net/JrXKp/play)
 * [固定列](https://jsrun.net/TrXKp/play)
 * [固定表头和列](https://jsrun.net/8rXKp/play)
@@ -99,8 +99,8 @@ Vue.use(VXETable)
 |------|------|-----|------|-----|
 | data | 显示的数据 | Array | — | — |
 | customs | 初始化绑定动态列 | Array | — | — |
-| height | 表格的高度 | String | — | — |
-| maxHeight | 表格的最大高度 | String | — | — |
+| height | 表格的高度 | Number | — | — |
+| maxHeight | 表格的最大高度 | Number | — | — |
 | stripe | 是否带有斑马纹 | Boolean | — | false |
 | border | 是否带有纵向边框 | Boolean | — | false |
 | size | 表格的尺寸 | String | medium / small / mini | — |
--- a/docs/index.html
+++ b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vxe-table/favicon.ico><title>vue table</title><link href=/vxe-table/static/css/index.2c10e9a0.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.0379ce63.js rel=preload as=script><link href=/vxe-table/static/js/index.d11fbeb7.js rel=preload as=script><link href=/vxe-table/static/css/index.2c10e9a0.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.0379ce63.js></script><script src=/vxe-table/static/js/index.d11fbeb7.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vxe-table/favicon.ico><title>vue table</title><link href=/vxe-table/static/css/index.5d605309.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.0379ce63.js rel=preload as=script><link href=/vxe-table/static/js/index.9fa78522.js rel=preload as=script><link href=/vxe-table/static/css/index.5d605309.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.0379ce63.js></script><script src=/vxe-table/static/js/index.9fa78522.js></script></body></html>
--- a/docs/static/css/index.2c10e9a0.css
+++ b/docs/static/css/index.2c10e9a0.css
--- a/docs/static/css/index.5d605309.css
+++ b/docs/static/css/index.5d605309.css
--- a/docs/static/js/index.9fa78522.js
+++ b/docs/static/js/index.9fa78522.js
--- a/docs/static/js/index.d11fbeb7.js
+++ b/docs/static/js/index.d11fbeb7.js
--- a/examples/views/Table1.vue
+++ b/examples/views/Table1.vue
@@ -32,7 +32,7 @@
    </vxe-table> -->

    <vxe-table
-      height="300"
+      max-height="300"
      border
      :data.sync="tableData"
      :customs.sync="customColumns"
@@ -46,7 +46,7 @@
      <vxe-table-column prop="address" label="地址" width="300" fixed="right"></vxe-table-column>
    </vxe-table>

-    <vxe-table
+    <!-- <vxe-table
      height="300"
      border
      :data.sync="tableData">
@@ -64,11 +64,10 @@
        <vxe-table-column prop="date" label="日期" min-width="200"></vxe-table-column>
      </vxe-table-column>
      <vxe-table-column prop="sex" label="性别" width="200"></vxe-table-column>
-    </vxe-table>
+    </vxe-table> -->

    <!-- <vxe-table
      border
-      height="400"
      :data.sync="tableData">
      <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>
      <vxe-table-column type="radio" width="60"></vxe-table-column>
@@ -97,7 +96,7 @@ export default {
  },
  created () {
    window.test = this
-    let list = window.CACHE_DATA_LIST.slice(0, 100)
+    let list = window.CACHE_DATA_LIST.slice(0, 5)
    this.tableData = list
  },
  methods: {
--- a/lib/index.common.js
+++ b/lib/index.common.js
@@ -3378,7 +3378,6 @@ function getNodeOffset(elem, container, rest) {



-
 /**
 * 渲染列
 */
@@ -3517,6 +3516,7 @@ function syncBodyScroll(scrollTop, elem1, elem2) {
        fixedType = this.fixedType;
    var highlightHoverRow = $table.highlightHoverRow,
        rowKey = $table.rowKey,
+        maxHeight = $table.maxHeight,
        height = $table.height,
        rowClassName = $table.rowClassName,
        tableData = $table.tableData,
@@ -3532,11 +3532,13 @@ function syncBodyScroll(scrollTop, elem1, elem2) {
    var leftList = columnStore.leftList,
        rightList = columnStore.rightList;
    var overflow = optimizeConfig.overflow;
-    var customHeight = isNaN(height) ? 0 : parse_float_default()(height);
+    var customHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default.a.toNumber(height);
    var style = {};

    if (customHeight) {
      style.height = "".concat(fixedType ? (customHeight || tableHeight) - scrollXHeight : customHeight, "px");
+    } else if (maxHeight) {
+      style['max-height'] = "".concat(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default.a.toNumber(maxHeight), "px");
    } // 如果是使用优化模式


@@ -3738,7 +3740,8 @@ var convertToRows = function convertToRows(originColumns) {
        headerColumn = this.headerColumn,
        tableColumn = this.tableColumn,
        resizeMousedown = this.resizeMousedown;
-    var headerRowClassName = $table.headerRowClassName,
+    var border = $table.border,
+        headerRowClassName = $table.headerRowClassName,
        headerCellClassName = $table.headerCellClassName,
        tableWidth = $table.tableWidth,
        scrollYWidth = $table.scrollYWidth;
@@ -3802,7 +3805,7 @@ var convertToRows = function convertToRows(originColumns) {
          columnIndex: columnIndex,
          fixed: fixedType,
          isHidden: fixedHiddenColumn
-        })), !isGroup ? h('div', {
+        })), border && !fixedType && !isGroup ? h('div', {
          class: ['vxe-resize'],
          on: {
            mousedown: function mousedown(evnt) {
@@ -4032,9 +4035,9 @@ function renderFixed(h, $table, fixedType) {
    // 初始化绑定动态列
    customs: Array,
    // 表格的高度
-    height: String,
+    height: [Number, String],
    // 表格的最大高度
-    maxHeight: String,
+    maxHeight: [Number, String],
    // 是否带有斑马纹
    stripe: Boolean,
    // 是否带有纵向边框
--- a/lib/index.umd.js
+++ b/lib/index.umd.js
@@ -3387,7 +3387,6 @@ function getNodeOffset(elem, container, rest) {



-
 /**
 * 渲染列
 */
@@ -3526,6 +3525,7 @@ function syncBodyScroll(scrollTop, elem1, elem2) {
        fixedType = this.fixedType;
    var highlightHoverRow = $table.highlightHoverRow,
        rowKey = $table.rowKey,
+        maxHeight = $table.maxHeight,
        height = $table.height,
        rowClassName = $table.rowClassName,
        tableData = $table.tableData,
@@ -3541,11 +3541,13 @@ function syncBodyScroll(scrollTop, elem1, elem2) {
    var leftList = columnStore.leftList,
        rightList = columnStore.rightList;
    var overflow = optimizeConfig.overflow;
-    var customHeight = isNaN(height) ? 0 : parse_float_default()(height);
+    var customHeight = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default.a.toNumber(height);
    var style = {};

    if (customHeight) {
      style.height = "".concat(fixedType ? (customHeight || tableHeight) - scrollXHeight : customHeight, "px");
+    } else if (maxHeight) {
+      style['max-height'] = "".concat(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default.a.toNumber(maxHeight), "px");
    } // 如果是使用优化模式


@@ -3747,7 +3749,8 @@ var convertToRows = function convertToRows(originColumns) {
        headerColumn = this.headerColumn,
        tableColumn = this.tableColumn,
        resizeMousedown = this.resizeMousedown;
-    var headerRowClassName = $table.headerRowClassName,
+    var border = $table.border,
+        headerRowClassName = $table.headerRowClassName,
        headerCellClassName = $table.headerCellClassName,
        tableWidth = $table.tableWidth,
        scrollYWidth = $table.scrollYWidth;
@@ -3811,7 +3814,7 @@ var convertToRows = function convertToRows(originColumns) {
          columnIndex: columnIndex,
          fixed: fixedType,
          isHidden: fixedHiddenColumn
-        })), !isGroup ? h('div', {
+        })), border && !fixedType && !isGroup ? h('div', {
          class: ['vxe-resize'],
          on: {
            mousedown: function mousedown(evnt) {
@@ -4041,9 +4044,9 @@ function renderFixed(h, $table, fixedType) {
    // 初始化绑定动态列
    customs: Array,
    // 表格的高度
-    height: String,
+    height: [Number, String],
    // 表格的最大高度
-    maxHeight: String,
+    maxHeight: [Number, String],
    // 是否带有斑马纹
    stripe: Boolean,
    // 是否带有纵向边框
--- a/lib/index.umd.min.js
+++ b/lib/index.umd.min.js
--- a/packages/table/src/body.js
+++ b/packages/table/src/body.js
@@ -95,13 +95,15 @@ export default {
  },
  render (h) {
    let { _e, $parent: $table, fixedType } = this
-    let { highlightHoverRow, rowKey, height, rowClassName, tableData, tableColumn, tableHeight, tableWidth, scrollXHeight, selectRow, hoverRow, overflowX, columnStore, optimizeConfig } = $table
+    let { highlightHoverRow, rowKey, maxHeight, height, rowClassName, tableData, tableColumn, tableHeight, tableWidth, scrollXHeight, selectRow, hoverRow, overflowX, columnStore, optimizeConfig } = $table
    let { leftList, rightList } = columnStore
    let { overflow } = optimizeConfig
-    let customHeight = isNaN(height) ? 0 : parseFloat(height)
+    let customHeight = XEUtils.toNumber(height)
    let style = {}
    if (customHeight) {
      style.height = `${fixedType ? (customHeight || tableHeight) - scrollXHeight : customHeight}px`
+    } else if (maxHeight) {
+      style['max-height'] = `${XEUtils.toNumber(maxHeight)}px`
    }
    // 如果是使用优化模式
    if (fixedType && overflow) {
--- a/packages/table/src/header.js
+++ b/packages/table/src/header.js
@@ -74,7 +74,7 @@ export default {
  },
  render (h) {
    let { _e, $parent: $table, fixedType, headerColumn, tableColumn, resizeMousedown } = this
-    let { headerRowClassName, headerCellClassName, tableWidth, scrollYWidth } = $table
+    let { border, headerRowClassName, headerCellClassName, tableWidth, scrollYWidth } = $table
    return h('div', {
      class: [fixedType ? `vxe-table--fixed-${fixedType}-header-wrapper` : 'vxe-table--header-wrapper']
    }, [
@@ -128,7 +128,7 @@ export default {
              h('div', {
                class: ['vxe-cell']
              }, column.renderHeader(h, { $table, column, columnIndex, fixed: fixedType, isHidden: fixedHiddenColumn })),
-              !isGroup ? h('div', {
+              border && !fixedType && !isGroup ? h('div', {
                class: ['vxe-resize'],
                on: {
                  mousedown: evnt => {
--- a/packages/table/src/table.js
+++ b/packages/table/src/table.js
@@ -58,9 +58,9 @@ export default {
    // 初始化绑定动态列
    customs: Array,
    // 表格的高度
-    height: String,
+    height: [Number, String],
    // 表格的最大高度
-    maxHeight: String,
+    maxHeight: [Number, String],
    // 是否带有斑马纹
    stripe: Boolean,
    // 是否带有纵向边框