releases 4.0.27

2025-12-11 08:38:08 +08:00 · 2021-08-20 22:10:06 +08:00
parent fa504a928c
commit c64bb5c540
11 changed files with 212 additions and 19 deletions
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -1493,6 +1493,12 @@ export default defineComponent({
                name: 'TableScrollMaxHeight'
              }
            },
+            {
+              label: 'app.aside.nav.rowHeight',
+              locat: {
+                name: 'TableScrollRowHeight'
+              }
+            },
            {
              label: 'app.aside.nav.group',
              locat: {
--- a/examples/api/table.ts
+++ b/examples/api/table.ts
@@ -2743,17 +2743,17 @@ const apis = [
            enum: '',
            defVal: '0',
            list: []
+          },
+          {
+            name: 'rHeight',
+            desc: '当启用虚拟滚动后，该参数用于设置每一行的固定高度',
+            version: '4.0.27',
+            type: 'number',
+            enum: '',
+            defVal: '',
+            list: []
          }
          // {
-          //   name: 'rHeight',
-          //   desc: '指定行高',
-          //   version: '',
-          //   type: 'number',
-          //   enum: '',
-          //   defVal: '默认自动计算',
-          //   list: []
-          // },
-          // {
          //   name: 'adaptive',
          //   desc: '自动适配最优的渲染方式',
          //   version: '',
--- a/examples/i18n/lang/en-US.ts
+++ b/examples/i18n/lang/en-US.ts
@@ -27,6 +27,7 @@ export default {
        hideHead: 'Hidden header',
        resizable: 'Resizable',
        fluidHeight: 'Maximum table height',
+        rowHeight: 'Row height',
        resize: 'Resize height and width',
        height: 'Table with fixed header',
        visible: '默认是否显示',
--- a/examples/i18n/lang/zh-CN.ts
+++ b/examples/i18n/lang/zh-CN.ts
@@ -27,6 +27,7 @@ export default {
        hideHead: '隐藏头部',
        resizable: '列宽拖动',
        fluidHeight: '最大高度',
+        rowHeight: '行高',
        resize: '响应式宽高',
        height: '固定表头',
        fixed: '固定列',
--- a/examples/i18n/lang/zh-TC.ts
+++ b/examples/i18n/lang/zh-TC.ts
@@ -27,6 +27,7 @@ export default {
        hideHead: '隐藏头部',
        resizable: '列宽拖动',
        fluidHeight: '最大高度',
+        rowHeight: '行高',
        resize: '响应式宽高',
        height: '固定表头',
        fixed: '固定列',
--- a/examples/router/index.ts
+++ b/examples/router/index.ts
@@ -176,6 +176,7 @@ import TableScrollFullCols from '../views/table/scroll/ScrollFullCols.vue'
 // import TableScrollHighlight from '../views/table/scroll/Highlight.vue'
 import TableScrollKeyboard from '../views/table/scroll/Keyboard.vue'
 import TableScrollMaxHeight from '../views/table/scroll/MaxHeight.vue'
+import TableScrollRowHeight from '../views/table/scroll/RowHeight.vue'
 import TableScrollGroup from '../views/table/scroll/Group.vue'
 import TableScrollMerge from '../views/table/scroll/Merge.vue'
 import TableScrollEdit from '../views/table/scroll/Edit.vue'
@@ -1214,6 +1215,11 @@ const routes: Array<RouteRecordRaw> = [
    name: 'TableScrollMaxHeight',
    component: TableScrollMaxHeight
  },
+  {
+    path: '/table/scroll/rowHeight',
+    name: 'TableScrollRowHeight',
+    component: TableScrollRowHeight
+  },
  {
    path: '/table/scroll/group',
    name: 'TableScrollGroup',
--- a/examples/views/table/scroll/RowHeight.vue
+++ b/examples/views/table/scroll/RowHeight.vue
@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <p class="tip">虚拟滚动启用后需要等行高，可以通过 <table-api-link prop="scroll-x"/>.rHeight 修改所有行的高度</p>
+
+    <vxe-table
+      border
+      resizable
+      show-overflow
+      ref="xTable"
+      height="500"
+      :scroll-y="{gt: 0, rHeight: 120}"
+      :loading="demo1.loading">
+      <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
+      <vxe-table-column title="图片" width="140" align="center">
+        <template #default>
+          <img src="/vxe-table/static/other/img1.gif" style="width: 100px;">
+        </template>
+      </vxe-table-column>
+      <vxe-table-column title="基本信息">
+        <template #default="{ row }">
+          <div class="label-ellipsis">{{ row.name }}</div>
+          <div class="label-ellipsis">{{ row.num }}</div>
+          <div class="label-ellipsis">{{ row.address }}</div>
+        </template>
+      </vxe-table-column>
+      <vxe-table-column field="num" title="Num" width="200"></vxe-table-column>
+      <vxe-table-column field="time" title="Time" width="200"></vxe-table-column>
+    </vxe-table>
+
+    <p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
+
+    <pre>
+      <pre-code class="xml">{{ demoCodes[0] }}</pre-code>
+      <pre-code class="javascript">{{ demoCodes[1] }}</pre-code>
+      <pre-code class="css">{{ demoCodes[1] }}</pre-code>
+    </pre>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref } from 'vue'
+import { VxeTableInstance } from '../../../../types/index'
+
+export default defineComponent({
+  setup () {
+    const demo1 = reactive({
+      loading: false
+    })
+
+    const xTable = ref({} as VxeTableInstance)
+
+    const mockList = (size: number) => {
+      const list: any[] = []
+      for (let index = 0; index < size; index++) {
+        list.push({
+          name: `名称${index} 名称名称 名称名称 名称名称名称名称名称名称 名称名称名称名称 名称名称名称名称名称名称`,
+          time: '2021-01-01 10:20:30',
+          num: 20,
+          address: 'shenzhen shenzhen shenzhen shenzhen shenzhen'
+        })
+      }
+      return list
+    }
+
+    const findList = () => {
+      demo1.loading = true
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const data = mockList(600)
+          const $table = xTable.value
+          if ($table) {
+            $table.loadData(data)
+          }
+          resolve(null)
+          demo1.loading = false
+        }, 300)
+      })
+    }
+
+    findList()
+
+    return {
+      demo1,
+      xTable,
+      demoCodes: [
+        `
+        <vxe-table
+          border
+          resizable
+          show-overflow
+          ref="xTable"
+          height="500"
+          :scroll-y="{gt: 0, rHeight: 120}"
+          :loading="loading">
+          <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
+          <vxe-table-column title="图片" width="120" align="center">
+            <template #default>
+              <img src="/vxe-table/static/other/img1.gif" style="width: 100px;">
+            </template>
+          </vxe-table-column>
+          <vxe-table-column title="基本信息">
+            <template #default="{ row }">
+              <div class="label-ellipsis">{{ row.name }}</div>
+              <div class="label-ellipsis">{{ row.num }}</div>
+              <div class="label-ellipsis">{{ row.address }}</div>
+            </template>
+          </vxe-table-column>
+          <vxe-table-column field="num" title="Num" width="200"></vxe-table-column>
+          <vxe-table-column field="time" title="Time" width="200"></vxe-table-column>
+        </vxe-table>
+        `,
+        `
+        export default {
+          data () {
+            return {
+              loading: false
+            }
+          },
+          mounted () {
+            this.loading = true
+            this.$nextTick(() => {
+              const $table = this.$refs.xTable
+              this.mockList(1000).then(data => {
+                this.loading = false
+                if ($table) {
+                  $table.loadData(data)
+                }
+              })
+            })
+          },
+          methods: {
+            mockList (size) {
+              return new Promise(resolve => {
+                const list = []
+                for (let index = 0; index < size; index++) {
+                  list.push({
+                    name: \`名称\${index} 名称名称 名称名称 名称名称名称名称名称名称 名称名称名称名称 名称名称名称名称名称名称\`,
+                    time: '2021-01-01 10:20:30',
+                    num: 20,
+                    address: 'shenzhen shenzhen shenzhen shenzhen shenzhen'
+                  })
+                }
+                resolve(list)
+              })
+            }
+          }
+        })
+        `,
+        `
+        .label-ellipsis {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        `
+      ]
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.label-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -77,7 +77,8 @@ gulp.task('build_modules', () => {
      strict: true,
      moduleResolution: 'node',
      noImplicitAny: true,
-      target: 'esnext',
+      target: 'es5',
+      module: 'esnext',
      lib: ['dom', 'esnext']
    }))
    .pipe(gulp.dest('es'))
@@ -85,9 +86,7 @@ gulp.task('build_modules', () => {
      presets: [
        '@babel/env'
      ],
-      plugins: [
-        '@babel/plugin-proposal-class-properties'
-      ]
+      plugins: []
    }))
    .pipe(gulp.dest('lib'))
    .pipe(uglify())
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vxe-table",
-  "version": "4.0.26",
+  "version": "4.0.27",
  "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
  "scripts": {
    "serve": "vue-cli-service serve",
@@ -40,13 +40,13 @@
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.2.2",
+    "@vue/compiler-sfc": "^3.2.4",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^7.0.0",
    "ant-design-vue": "^2.2.6",
    "core-js": "^3.6.5",
    "dayjs": "^1.10.6",
-    "element-plus": "^1.0.2-beta.70",
+    "element-plus": "^1.0.2-beta.71",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
@@ -75,7 +75,7 @@
    "sass-loader": "^8.0.2",
    "sortablejs": "^1.14.0",
    "typescript": "~4.3.5",
-    "vue": "^3.2.2",
+    "vue": "^3.2.4",
    "vue-i18n": "^9.1.7",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2",
--- a/packages/table/src/body.ts
+++ b/packages/table/src/body.ts
@@ -116,8 +116,10 @@ export default defineComponent({
      const checkboxOpts = computeCheckboxOpts.value
      const editOpts = computeEditOpts.value
      const tooltipOpts = computeTooltipOpts.value
+      const sYOpts = computeSYOpts.value
      const { type, cellRender, editRender, align, showOverflow, className, treeNode } = column
      const { actived } = editStore
+      const { rHeight } = sYOpts
      const showAllTip = tooltipOpts.showAll
      const columnIndex = $xetable.getColumnIndex(column)
      const _columnIndex = $xetable.getVTColumnIndex(column)
@@ -226,7 +228,10 @@ export default defineComponent({
              'c--title': showTitle,
              'c--tooltip': showTooltip,
              'c--ellipsis': showEllipsis
-            }]
+            }],
+            style: {
+              maxHeight: hasEllipsis && rHeight ? `${rHeight}px` : ''
+            }
          })
        )
      } else {
@@ -239,6 +244,9 @@ export default defineComponent({
              'c--tooltip': showTooltip,
              'c--ellipsis': showEllipsis
            }],
+            style: {
+              maxHeight: hasEllipsis && rHeight ? `${rHeight}px` : ''
+            },
            title: showTitle ? $xetable.getCellLabel(row, column) : null
          }, column.renderCell(params))
        )
@@ -274,7 +282,9 @@ export default defineComponent({
        }, getPropClass(className, params), getPropClass(cellClassName, params)],
        key: columnKey ? column.id : $columnIndex,
        ...attrs,
-        style: cellStyle ? (XEUtils.isFunction(cellStyle) ? cellStyle(params) : cellStyle) : null,
+        style: Object.assign({
+          height: hasEllipsis && rHeight ? `${rHeight}px` : ''
+        }, cellStyle ? (XEUtils.isFunction(cellStyle) ? cellStyle(params) : cellStyle) : null),
        ...tdOns
      }, tdVNs)
    }
--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -1828,6 +1828,7 @@ export namespace VxeTablePropTypes {
    gt?: number;
    oSize?: number;
    enabled?: boolean;
+    rHeight?: number;
    adaptive?: boolean;
  }
  export interface SYOpts extends ScrollY {