update

x-extends · Jun 13, 2019 · 40ca153 · 40ca153
1 parent 4d4b61b
commit 40ca153
Show file tree

Hide file tree

Showing 16 changed files with 147 additions and 246 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ A powerful, flexible, configurable, extensible Vue Table component.
 * vxe-table 的设计理念
   * 精简的 API（简洁、高效、通用）
   * 更加灵活的自定义配置项，更高的可扩展性（兼容任意组件库，不污染全局样式及变量）
-  * 强大的功能的同时兼具性能
+  * 强大的功能的同时兼具性能（支持虚拟滚动渲染）
 
 😉 如果有更好的建议、优化点或 Bug 都欢迎提 [Issues](https://github.com/xuliangzhan/vxe-table/issues)
 
@@ -48,7 +48,7 @@ A powerful, flexible, configurable, extensible Vue Table component.
 * Format content （格式化内容）
 * Custom column template （自定义模板）
 * Context menu（快捷菜单）
-* Virtual Scroller（可视渲染）
+* Virtual Scroller（虚拟滚动渲染）
 * Expandable row （展开行）
 * Pager（分页）
 * Toolbar（工具栏）

diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=Cache-Control content="no-cache, no-store, must-revalidate"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><link rel=icon href=/vxe-table/favicon.ico><title>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.73f3d338.css rel=preload as=style><link href=/vxe-table/static/css/index.b3635b72.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.9d232144.js rel=preload as=script><link href=/vxe-table/static/js/index.3227a086.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.73f3d338.css rel=stylesheet><link href=/vxe-table/static/css/index.b3635b72.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.9d232144.js></script><script src=/vxe-table/static/js/index.3227a086.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=Cache-Control content="no-cache, no-store, must-revalidate"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><link rel=icon href=/vxe-table/favicon.ico><title>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.73f3d338.css rel=preload as=style><link href=/vxe-table/static/css/index.b3635b72.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.9d232144.js rel=preload as=script><link href=/vxe-table/static/js/index.840f8339.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.73f3d338.css rel=stylesheet><link href=/vxe-table/static/css/index.b3635b72.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.9d232144.js></script><script src=/vxe-table/static/js/index.840f8339.js></script></body></html>
diff --git a/docs/static/js/index.3227a086.js b/docs/static/js/index.3227a086.js
diff --git a/docs/static/js/index.840f8339.js b/docs/static/js/index.840f8339.js
diff --git a/examples/api/table.js b/examples/api/table.js
@@ -822,7 +822,7 @@ const apis = [
             list: [
               {
                 name: 'gt',
-                desc: '指定大于多少范围时自动启动可视渲染',
+                desc: '指定大于多少范围时自动启动虚拟滚动渲染',
                 type: 'Number',
                 enum: '',
                 defVal: '60',
@@ -863,7 +863,7 @@ const apis = [
             list: [
               {
                 name: 'gt',
-                desc: '指定大于多少范围时自动启动可视渲染',
+                desc: '指定大于多少范围时自动启动虚拟滚动渲染',
                 type: 'Number',
                 enum: '',
                 defVal: '500',

diff --git a/examples/i18n/lang/zh-CN.js b/examples/i18n/lang/zh-CN.js
@@ -66,7 +66,7 @@ module.exports = {
         big1wRow: '1 万行',
         big10wRow: '10 万行 + 更复杂渲染',
         big1wRow1wCol: '1 万行 1 万列',
-        big10wRow1wCol: '1 万行 1 万列 + 更复杂渲染',
+        big10wRow1wCol: '10 万行 1 万列 + 更复杂渲染',
         infiniteScroll: '无限滚动',
 
         editable: '可编辑表格',

diff --git a/examples/views/table/scroll/Scroll.vue b/examples/views/table/scroll/Scroll.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>可视渲染，只会渲染可视区域的数据，对于海量数据的性能提升非常大</p>
+    <p>虚拟滚动渲染，只会渲染可视区域的数据，对于海量数据的性能提升非常大</p>
     <p>推荐使用性能更优的 <grid-api-link name="vxe-grid"/> ，因为不需要为每个 <table-column-api-link name="vxe-table-column"/>  创建实例，列越多越能体现出来</p>
     <p>相关参数说明 {seq: 序号, $rowIndex: 获取渲染中的行索引, rowIndex: 获取真实的行索引, row: 获取行数据, column: 获取列配置, columnIndex: 获取真实列索引，$columnIndex:获取渲染中的列索引}</p>
 

diff --git a/examples/views/table/scroll/ScrollCols.vue b/examples/views/table/scroll/ScrollCols.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <p>可视渲染，加载 1 万行 1 万列</p>
-    <p><grid-api-link name="vxe-grid"/> 的性能比 <table-api-link name="vxe-table"/> 快 n 倍，因为不需要为每个 <table-column-api-link name="vxe-table-column"/>  创建实例，列越多越能体现出来</p>
+    <p>虚拟滚动渲染，加载 1 万行 1 万列</p>
+    <p><grid-api-link name="vxe-grid"/> 的性能比 <table-api-link name="vxe-table"/> 更快，因为不需要为每个 <table-column-api-link name="vxe-table-column"/>  创建实例，列越多越能体现出来</p>
 
     <vxe-grid
       border
@@ -32,7 +32,7 @@ export default {
     this.tableData = []
     setTimeout(() => {
       this.tableData = window.MOCK_DATA_LIST.slice(0, 10000)
-      this.tableColumn = window.MOCK_COLUMN_LIST.slice(0, 10000)
+      this.tableColumn = window.MOCK_COLUMN_LIST.slice(0, 10000).map(item => Object.assign({}, item, { fixed: undefined }))
       this.loading = false
     }, 500)
   }

diff --git a/examples/views/table/scroll/ScrollFullCols.vue b/examples/views/table/scroll/ScrollFullCols.vue
@@ -1,21 +1,17 @@
 <template>
   <div>
-    <p>可视渲染，加载 10 万行 1 万列，左右固定列，表尾合计</p>
-    <p><grid-api-link name="vxe-grid"/> 的性能比 <table-api-link name="vxe-table"/> 快 n 倍，因为不需要为每个 <table-column-api-link name="vxe-table-column"/>  创建实例，列越多越能体现出来</p>
+    <p>虚拟滚动渲染，加载 10 万行 1 万列，左右固定列</p>
     <p>大数据不建议使用双向绑定的 <table-api-link name="data"/> 属性（vue 监听会大数据会短暂的卡顿），建议使用 <table-api-link prop="loadData"/>/<table-api-link prop="reloadData"/> 函数</p>
-    <p>对于多选 type=<table-column-api-link prop="selection"/> 当数据量海量时应该绑定 <table-api-link prop="checkProp"/> 属性渲染速度可以提升n倍以上</p>
+    <p>对于多选 type=<table-column-api-link prop="selection"/> 当数据量海量时应该绑定 <table-api-link prop="checkProp"/> 属性渲染速度更快</p>
     <p>数据超大情况下必须使用：<table-api-link prop="show-all-overflow"/>，<table-api-link prop="show-header-all-overflow"/> 参数以及调整好 <table-api-link prop="optimization"/> ：{scrollX,scrollY} 适合的参数可以更加流畅</p>
 
     <vxe-grid
       ref="xTable"
       border
       resizable
-      show-footer
       show-all-overflow
       show-header-all-overflow
       height="600"
-      :footer-method="footerMethod"
-      :footer-cell-class-name="footerCellClassName"
       :loading="loading"
       :columns="tableColumn"
       :select-config="{checkProp: 'checked'}"
@@ -29,8 +25,7 @@ export default {
   data () {
     return {
       loading: false,
-      tableColumn: [],
-      footerData: []
+      tableColumn: []
     }
   },
   created () {
@@ -42,29 +37,10 @@ export default {
           this.tableData = window.MOCK_DATA_LIST.slice(0, 100000)
           this.tableColumn = window.MOCK_COLUMN_LIST.slice(0, 10000)
           this.$refs.xTable.reloadData(this.tableData)
-          // 此为演示用，由于数据太过庞大，前端计算耗时太久
-          this.footerData = [
-            Array.from(new Array(10000)).map(item => '-'),
-            Array.from(new Array(10000)).map(item => '-')
-          ]
         }
         this.loading = false
       }, 300)
     })
-  },
-  methods: {
-    footerCellClassName ({ rowIndex, column, columnIndex }) {
-      if (columnIndex === 0) {
-        if (rowIndex === 0) {
-          return 'col-blue'
-        } else {
-          return 'col-red'
-        }
-      }
-    },
-    footerMethod ({ columns, data }) {
-      return this.footerData
-    }
   }
 }
 </script>
diff --git a/examples/views/table/scroll/ScrollFullRows.vue b/examples/views/table/scroll/ScrollFullRows.vue
@@ -1,19 +1,16 @@
 <template>
   <div>
-    <p>可视渲染，加载 10 万行，左右固定列，表尾合计</p>
+    <p>虚拟滚动渲染，加载 10 万行，左右固定列</p>
     <p>大数据不建议使用双向绑定的 data 属性（vue 监听会大数据会短暂的卡顿），建议使用 loadData/reloadData 函数</p>
-    <p>对于多选 type=<table-column-api-link prop="selection"/> 当数据量海量时应该绑定 <table-api-link prop="checkProp"/> 属性渲染速度可以提升n倍以上</p>
+    <p>对于多选 type=<table-column-api-link prop="selection"/> 当数据量海量时应该绑定 <table-api-link prop="checkProp"/> 属性渲染速度更快</p>
     <p>数据超大情况下必须使用：<table-api-link prop="show-all-overflow"/>，<table-api-link prop="show-header-all-overflow"/> 参数以及调整好 <table-api-link prop="optimization"/> ：{scrollX,scrollY} 适合的参数可以更加流畅</p>
 
     <vxe-table
       ref="xTable"
       border
       resizable
-      show-footer
       show-all-overflow
       height="600"
-      :footer-method="footerMethod"
-      :footer-cell-class-name="footerCellClassName"
       :loading="loading"
       :select-config="{checkProp: 'checked'}"
       :optimization ="{scrollY: {gt: 500, oSize: 20, rSize: 60}}">
@@ -43,13 +40,10 @@
 </template>
 
 <script>
-import XEUtils from 'xe-utils'
-
 export default {
   data () {
     return {
-      loading: false,
-      updateFooter: 0
+      loading: false
     }
   },
   created () {
@@ -59,66 +53,11 @@ export default {
       setTimeout(() => {
         if (this.$refs.xTable) {
           this.tableData = window.MOCK_DATA_LIST.slice(0, 100000)
-          this.$refs.xTable.reloadData(this.tableData).then(() => {
-            // 由于没有使用响应式的 data，所以 footerMethod 是无法自动执行的
-            // 建议提前计算好，或者手动改变响应的属性去触发
-            this.updateFooter++
-          })
+          this.$refs.xTable.reloadData(this.tableData)
         }
         this.loading = false
       }, 300)
     })
-  },
-  methods: {
-    footerCellClassName ({ rowIndex, column, columnIndex }) {
-      if (columnIndex === 0) {
-        if (rowIndex === 0) {
-          return 'col-blue'
-        } else {
-          return 'col-red'
-        }
-      }
-    },
-    footerMethod ({ columns, data }) {
-      if (this.updateFooter) {
-        return [
-          columns.map((column, columnIndex) => {
-            if (columnIndex === 0) {
-              return '平均'
-            } else if (column.property === 'age') {
-              return `${parseInt(XEUtils.mean(data, column.property))} 岁`
-            } else if (column.property === 'rate') {
-              return `${parseInt(XEUtils.mean(data, column.property))} 分`
-            }
-            return '-'
-          }),
-          columns.map((column, columnIndex) => {
-            if (columnIndex === 0) {
-              return '和值'
-            } else if (column.property === 'rate') {
-              return `总分 ${XEUtils.sum(data, column.property)}`
-            }
-            return '-'
-          }),
-          columns.map((column, columnIndex) => {
-            if (columnIndex === 0) {
-              return '统计'
-            }
-            if (column.property === 'sex') {
-              let rest = XEUtils.groupBy(data, column.property)
-              return `男 ${rest[1] ? rest[1].length : 0} 人，女 ${rest[0] ? rest[0].length : 0} 人`
-            }
-            return '-'
-          })
-        ]
-      }
-      // 即使是空数据也必须要保持行数一致
-      return [
-        ['-'],
-        ['-'],
-        ['-']
-      ]
-    }
   }
 }
 </script>
diff --git a/examples/views/table/scroll/ScrollRows.vue b/examples/views/table/scroll/ScrollRows.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>可视渲染，加载 1 万行，左右固定列</p>
+    <p>虚拟滚动渲染，加载 1 万行，左右固定列</p>
 
     <vxe-table
       ref="xTable"
@@ -11,7 +11,7 @@
       :loading="loading"
       :data.sync="tableData"
       :optimization ="{scrollY: {gt: 500, oSize: 20, rSize: 60}}">>
-      <vxe-table-column type="index" width="100" fixed="left"></vxe-table-column>
+      <vxe-table-column type="index" width="100"></vxe-table-column>
       <vxe-table-column prop="name" label="Name" sortable width="200"></vxe-table-column>
       <vxe-table-column prop="age" label="Age" width="200"></vxe-table-column>
       <vxe-table-column prop="sex" label="Sex" width="200"></vxe-table-column>
@@ -30,7 +30,7 @@
       <vxe-table-column prop="attr7" label="Attr7" width="200"></vxe-table-column>
       <vxe-table-column prop="attr8" label="Attr8" width="200"></vxe-table-column>
       <vxe-table-column prop="attr9" label="Attr9" width="200"></vxe-table-column>
-      <vxe-table-column prop="createTime" label="CreateTime" width="200" fixed="right"></vxe-table-column>
+      <vxe-table-column prop="createTime" label="CreateTime" width="200"></vxe-table-column>
     </vxe-table>
   </div>
 </template>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=Cache-Control content="no-cache, no-store, must-revalidate"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><link rel=icon href=/vxe-table/favicon.ico><title>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.73f3d338.css rel=preload as=style><link href=/vxe-table/static/css/index.b3635b72.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.9d232144.js rel=preload as=script><link href=/vxe-table/static/js/index.3227a086.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.73f3d338.css rel=stylesheet><link href=/vxe-table/static/css/index.b3635b72.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.9d232144.js></script><script src=/vxe-table/static/js/index.3227a086.js></script></body></html>
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=Cache-Control content="no-cache, no-store, must-revalidate"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><link rel=icon href=/vxe-table/favicon.ico><title>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.73f3d338.css rel=preload as=style><link href=/vxe-table/static/css/index.b3635b72.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.9d232144.js rel=preload as=script><link href=/vxe-table/static/js/index.840f8339.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.73f3d338.css rel=stylesheet><link href=/vxe-table/static/css/index.b3635b72.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.9d232144.js></script><script src=/vxe-table/static/js/index.840f8339.js></script></body></html>