Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@xuliangzhan
xuliangzhan committed May 24, 2019
1 parent 8a8fe7f commit 6e6aa54
Show file tree
Hide file tree
Showing 23 changed files with 1,903 additions and 1,784 deletions.
2 changes: 1 addition & 1 deletion docs/index.html
View file
@@ -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>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.27509805.css rel=preload as=style><link href=/vxe-table/static/css/index.27cffe0e.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.59abef37.js rel=preload as=script><link href=/vxe-table/static/js/index.286c7350.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.27509805.css rel=stylesheet><link href=/vxe-table/static/css/index.27cffe0e.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.59abef37.js></script><script src=/vxe-table/static/js/index.286c7350.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>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.27509805.css rel=preload as=style><link href=/vxe-table/static/css/index.27cffe0e.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.59abef37.js rel=preload as=script><link href=/vxe-table/static/js/index.19d712b5.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.27509805.css rel=stylesheet><link href=/vxe-table/static/css/index.27cffe0e.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.59abef37.js></script><script src=/vxe-table/static/js/index.19d712b5.js></script></body></html>
1 change: 1 addition & 0 deletions docs/static/js/index.19d712b5.js
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion docs/static/js/index.286c7350.js
View file

This file was deleted.

7 changes: 7 additions & 0 deletions examples/main.js
View file
Expand Up @@ -29,6 +29,13 @@ function mockData () {
label: 'cloumn_' + fullIndex,
width: 160
}
if (fullIndex === 1) {
colItem.type = 'selection'
colItem.width = 60
}
if (fullIndex < 3) {
colItem.fixed = 'left'
}
if (fullIndex < 3) {
colItem.sortable = true
} else if (fullIndex === 4) {
Expand Down
16 changes: 4 additions & 12 deletions examples/views/table/api/Table.vue
View file
Expand Up @@ -373,20 +373,12 @@ export default {
},
{
name: 'checkProp',
desc: '绑定选中属性，如果设置了渲染可以达到最快（建议数据量大时使用）',
desc: '绑定选中属性，如果设置了该属性渲染速度可以提升到最快（建议数据量大时使用）',
type: 'String',
enum: '',
defVal: '',
list: []
},
{
name: 'showCheckAll',
desc: '是否显示全选复选框',
type: 'Boolean',
enum: '',
defVal: 'true',
list: []
},
{
name: 'checkAll',
desc: '默认勾选所有',
Expand All @@ -404,7 +396,7 @@ export default {
list: []
},
{
name: 'selectMethod',
name: 'checkMethod',
desc: '是否允许勾选的方法，该方法 Function({row, rowIndex}) 的返回值用来决定这一行的 CheckBox 是否可以勾选',
type: 'Function',
enum: '',
Expand Down Expand Up @@ -1005,15 +997,15 @@ export default {
list: [
{
name: 'load()',
desc: '加载化数据',
desc: '加载数据',
type: 'Promise',
enum: '',
defVal: 'data',
list: []
},
{
name: 'reload()',
desc: '加载化数据，恢复初始状态',
desc: '加载数据并恢复到初始状态',
type: 'Promise',
enum: '',
defVal: 'data',
Expand Down
4 changes: 2 additions & 2 deletions examples/views/table/base/Basic.vue
View file
Expand Up @@ -22,7 +22,7 @@
<vxe-table
highlight-hover-row
:data.sync="tableData">
<vxe-table-column type="index" width="60"></vxe-table-column>
<vxe-table-column type="index" label="序号" width="60"></vxe-table-column>
<vxe-table-column prop="name" label="Name"></vxe-table-column>
<vxe-table-column prop="sex" label="Sex"></vxe-table-column>
<vxe-table-column prop="age" label="Age"></vxe-table-column>
Expand Down Expand Up @@ -71,7 +71,7 @@ export default {
<vxe-table
highlight-hover-row
:data.sync="tableData">
<vxe-table-column type="index" width="60"></vxe-table-column>
<vxe-table-column type="index" label="序号" width="60"></vxe-table-column>
<vxe-table-column prop="name" label="Name"></vxe-table-column>
<vxe-table-column prop="sex" label="Sex"></vxe-table-column>
<vxe-table-column prop="age" label="Age"></vxe-table-column>
Expand Down
2 changes: 1 addition & 1 deletion examples/views/table/base/Index.vue
View file
Expand Up @@ -19,7 +19,7 @@
border
height="300"
:data.sync="tableData2">
<vxe-table-column type="index" width="60" :index-method="indexMethod"></vxe-table-column>
<vxe-table-column type="index" label="序号" width="60" :index-method="indexMethod"></vxe-table-column>
<vxe-table-column prop="name" label="Name" sortable></vxe-table-column>
<vxe-table-column prop="sex" label="Sex"></vxe-table-column>
<vxe-table-column prop="age" label="Age"></vxe-table-column>
Expand Down
6 changes: 3 additions & 3 deletions examples/views/table/base/Selection.vue
View file
Expand Up @@ -18,7 +18,7 @@
<vxe-table-column prop="address" label="Address" show-overflow></vxe-table-column>
</vxe-table>

<p>还可以通过 selectMethod 方法控制是否允许点击 CheckBox 勾选</p>
<p>还可以通过 checkMethod 方法控制是否允许点击 CheckBox 勾选</p>

<button class="btn" @click="$refs.xTable2.toggleRowSelection(tableData[1])">切换第二行选中</button>
<button class="btn" @click="$refs.xTable2.setSelection([tableData[2], tableData[3]], true)">设置第三、四行选中</button>
Expand All @@ -29,7 +29,7 @@
border
height="300"
:data.sync="tableData"
:select-config="{selectMethod}">
:select-config="{checkMethod}">
<vxe-table-column type="selection" width="60"></vxe-table-column>
<vxe-table-column prop="name" label="Name"></vxe-table-column>
<vxe-table-column prop="sex" label="Sex"></vxe-table-column>
Expand Down Expand Up @@ -70,7 +70,7 @@ export default {
this.tableData = list
},
methods: {
selectMethod ({ row }) {
checkMethod ({ row }) {
return row.age > 26
}
}
Expand Down
2 changes: 0 additions & 2 deletions examples/views/table/scroll/Scroll.vue
View file
@@ -1,8 +1,6 @@
<template>
<div>
<p>海量数据</p>
<p>大数据不建议使用双向绑定的 data 属性（vue 监听会大数据会短暂的卡顿），建议使用 load 函数</p>
<p>实际渲染速度受以下影响：多选(超严重)、固定列(严重)、底部合计(中度)、数据运算量(轻度)、任何双向的数据或函数都会影响加载速度</p>

<vxe-table
border
Expand Down
1 change: 1 addition & 0 deletions examples/views/table/scroll/ScrollCols.vue
View file
Expand Up @@ -11,6 +11,7 @@
:columns="tableColumn"
:loading="loading"
:data.sync="tableData"
:select-config="{checkProp: 'checked'}"
:optimized="{scrollX: {gt: 20, oSize: 4, rSize: 8}, scrollY: {gt: 500, oSize: 20, rSize: 60}}">
</vxe-grid>
</div>
Expand Down
20 changes: 10 additions & 10 deletions examples/views/table/scroll/ScrollFullCols.vue
View file
@@ -1,10 +1,11 @@
<template>
<div>
<p>加载 10 万行 1 万列，左右固定列，表尾合计</p>
<p>实际渲染速度受以下影响：多选(超严重)、固定列(中度)、底部合计(中度)、数据运算量(轻度)、任何双向的数据或函数都会影响加载速度</p>
<p>大数据不建议使用双向绑定的 data 属性（vue 监听会大数据会短暂的卡顿），建议使用 load/reload 函数</p>
<p>对于多选 type="selection" 当数据量海量时应该绑定 prop 属性渲染速度可以提升10倍以上</p>
<p>数据超大情况下必须使用：show-all-overflow,show-header-all-overflow 参数以及调整好 optimized：{scrollX,scrollY} 适合的参数可以更加流畅</p>

<vxe-table
<vxe-grid
ref="xTable"
border
resizable
Expand All @@ -15,11 +16,10 @@
:footer-method="footerMethod"
:footer-cell-class-name="footerCellClassName"
:loading="loading"
:columns="tableColumn"
:select-config="{checkProp: 'checked'}"
:optimized="{scrollX: {gt: 20, oSize: 4, rSize: 8}, scrollY: {gt: 500, oSize: 20, rSize: 50}}">
<vxe-table-column type="index" width="100" fixed="left"></vxe-table-column>
<vxe-table-column v-for="(item, index) in tableColumn" :key="index" prop="name" :label="`column_${index}`" width="200"></vxe-table-column>
<vxe-table-column prop="rate" label="Rate" width="200" fixed="right"></vxe-table-column>
</vxe-table>
</vxe-grid>
</div>
</template>

Expand All @@ -39,12 +39,12 @@ export default {
this.$refs.xTable.reload([])
setTimeout(() => {
if (this.$refs.xTable) {
let list = window.MOCK_DATA_LIST.slice(0, 100000)
this.tableColumn = window.MOCK_DATA_LIST.slice(0, 10000)
this.$refs.xTable.reload(list)
this._tableData = window.MOCK_DATA_LIST.slice(0, 100000)
this.tableColumn = window.MOCK_COLUMN_LIST.slice(0, 10000)
this.$refs.xTable.reload(this._tableData)
}
this.loading = false
}, 500)
}, 300)
})
},
methods: {
Expand Down
8 changes: 4 additions & 4 deletions examples/views/table/scroll/ScrollFullRows.vue
View file
@@ -1,7 +1,7 @@
<template>
<div>
<p>加载 10 万行，左右固定列，表尾合计</p>
<p>实际渲染速度受以下影响：多选(严重)、固定列(中度)、底部合计(中度)、数据运算量(轻度)、任何双向的数据或函数都会影响加载速度</p>
<p>大数据不建议使用双向绑定的 data 属性（vue 监听会大数据会短暂的卡顿），建议使用 load/reload 函数</p>
<p>对于多选 type="selection" 当数据量海量时应该绑定 prop 属性渲染速度可以提升10倍以上</p>
<p>数据超大情况下必须使用：show-all-overflow,show-header-all-overflow 参数以及调整好 optimized：{scrollX,scrollY} 适合的参数可以更加流畅</p>

Expand Down Expand Up @@ -57,11 +57,11 @@ export default {
this.$refs.xTable.reload([])
setTimeout(() => {
if (this.$refs.xTable) {
let list = window.MOCK_DATA_LIST.slice(0, 100000)
this.$refs.xTable.reload(list)
this._tableData = window.MOCK_DATA_LIST.slice(0, 100000)
this.$refs.xTable.reload(this._tableData)
}
this.loading = false
}, 500)
}, 300)
})
},
methods: {
Expand Down
6 changes: 4 additions & 2 deletions examples/views/table/tree/Basic.vue
View file
Expand Up @@ -23,7 +23,8 @@
<vxe-table
:data.sync="tableData"
:tree-config="{key: 'id', children: 'children', expandAll: true}">
<vxe-table-column prop="name" label="Name" tree-node></vxe-table-column>
<vxe-table-column type="index" width="120" label="序号" tree-node></vxe-table-column>
<vxe-table-column prop="name" label="Name"></vxe-table-column>
<vxe-table-column prop="size" label="Size"></vxe-table-column>
<vxe-table-column prop="type" label="Type"></vxe-table-column>
<vxe-table-column prop="date" label="Date"></vxe-table-column>
Expand Down Expand Up @@ -277,7 +278,8 @@ export default {
<vxe-table
:data.sync="tableData"
:tree-config="{key: 'id', children: 'children', expandAll: true}">
<vxe-table-column prop="name" label="Name" tree-node></vxe-table-column>
<vxe-table-column type="index" width="120" label="序号" tree-node></vxe-table-column>
<vxe-table-column prop="name" label="Name"></vxe-table-column>
<vxe-table-column prop="size" label="Size"></vxe-table-column>
<vxe-table-column prop="type" label="Type"></vxe-table-column>
<vxe-table-column prop="date" label="Date"></vxe-table-column>
Expand Down

0 comments on commit 6e6aa54

Please sign in to comment.