1
1
<template >
2
- <div class =" app" >
3
- <GithubCorner path =" /item-mode" />
4
- <div class =" container" >
5
- <Header
6
- title =" table-mode"
7
- :desciption =" 'Build ' + itemCount.toLocaleString() + ' items.'"
8
- :start-index =" start"
9
- :on-data-change =" onHeaderDataChange"
10
- />
11
- <div class =" main my-table" >
12
- <div >
13
- <table
14
- cellspacing =" 0"
15
- cellpadding =" 0"
16
- >
17
- <colgroup >
18
- <col :span =" columnsLength" />
19
- </colgroup >
20
- <thead >
21
- <tr >
22
- <th
23
- v-for =" key in keys"
24
- :key =" key"
25
- :title =" key"
26
- >{{key}}</th >
27
- </tr >
28
- </thead >
29
- </table >
30
- </div >
31
- <!-- old item mode usage -->
32
- <!-- :item="item"
33
- :itemprops="getItemProps" -->
34
- <virtual-list
35
- :size =" size"
36
- :remain =" remain"
37
- :bench =" 30"
38
- :start =" start"
39
- :isTable =" true"
40
- :itemcount =" itemCount"
2
+ <div class =" app" >
3
+ <GithubCorner path =" /item-mode" />
4
+ <div class =" container" >
5
+ <Header
6
+ title =" table-mode"
7
+ :desciption =" 'Build ' + itemCount.toLocaleString() + ' items.'"
8
+ :start-index =" start"
9
+ :on-data-change =" onHeaderDataChange"
10
+ />
11
+ <div class =" main my-table" >
12
+ <div >
13
+ <table
14
+ cellspacing =" 0"
15
+ cellpadding =" 0"
41
16
>
42
- <template v-slot :item =" targetIndex " >
43
- <item
44
- :key =" targetIndex"
45
- :height =" getItemProps(targetIndex).props.height"
46
- :index =" getItemProps(targetIndex).props.index"
47
- :info =" getItemProps(targetIndex).props.info"
48
- ></item >
49
- </template >
50
- </virtual-list >
17
+ <colgroup >
18
+ <col :span =" columnsLength" >
19
+ </colgroup >
20
+ <thead >
21
+ <tr >
22
+ <th
23
+ v-for =" key in keys"
24
+ :key =" key"
25
+ :title =" key"
26
+ >
27
+ {{ key }}
28
+ </th >
29
+ </tr >
30
+ </thead >
31
+ </table >
51
32
</div >
33
+ <!-- old item mode usage -->
34
+ <!-- :item="item"
35
+ :itemprops="getItemProps" -->
36
+ <virtual-list
37
+ :size =" size"
38
+ :remain =" remain"
39
+ :bench =" 30"
40
+ :start =" start"
41
+ :is-table =" true"
42
+ :itemcount =" itemCount"
43
+ >
44
+ <template v-slot :item =" targetIndex " >
45
+ <item
46
+ :key =" targetIndex"
47
+ :height =" getItemProps(targetIndex).props.height"
48
+ :index =" getItemProps(targetIndex).props.index"
49
+ :info =" getItemProps(targetIndex).props.info"
50
+ />
51
+ </template >
52
+ </virtual-list >
52
53
</div >
53
54
</div >
55
+ </div >
54
56
</template >
55
57
56
58
<script >
57
- import Vue from ' vue' ;
59
+ import Vue from ' vue'
58
60
import VirtualList from ' vue-virtual-scroll-list'
59
61
import { countStorage , getRandomUser } from ' ../common/util'
60
62
61
-
62
63
const Item = Vue .extend ({
63
64
props: {
64
65
info: {
@@ -72,18 +73,18 @@ const Item = Vue.extend({
72
73
height: {
73
74
type: Number ,
74
75
default: 0
75
- },
76
+ }
76
77
},
77
78
computed: {
78
- itemStyle () {
79
+ itemStyle () {
79
80
return {
80
- ' height' : ` ${ this .height } px` ,
81
+ height: ` ${ this .height } px` ,
81
82
' line-height' : ` ${ this .height } px`
82
83
}
83
84
}
84
85
},
85
- render (h ) {
86
- const { info , index , itemStyle } = this ;
86
+ render (h ) {
87
+ const { info , index , itemStyle } = this
87
88
const tds = Object .values (info).map (v => h (' td' , ` (${ index} )--${ v} ` ))
88
89
return h (' tr' , { style: itemStyle }, tds)
89
90
}
@@ -93,7 +94,7 @@ const remain = 20
93
94
const itemSize = 20
94
95
const itemCount = countStorage .get ()
95
96
96
- let userInfoList = []
97
+ const userInfoList = []
97
98
for (let i = 0 ; i < itemCount; i++ ) {
98
99
userInfoList .push (getRandomUser ())
99
100
}
@@ -103,10 +104,10 @@ export default {
103
104
name: ' App' ,
104
105
components: {
105
106
' virtual-list' : VirtualList,
106
- ' item' : Item,
107
+ item: Item
107
108
},
108
109
109
- data () {
110
+ data () {
110
111
return {
111
112
remain,
112
113
start: 0 ,
@@ -119,7 +120,7 @@ export default {
119
120
},
120
121
121
122
methods: {
122
- getItemProps (itemIndex ) {
123
+ getItemProps (itemIndex ) {
123
124
return {
124
125
key: itemIndex,
125
126
props: {
@@ -130,7 +131,7 @@ export default {
130
131
}
131
132
},
132
133
133
- onHeaderDataChange (type , value ) {
134
+ onHeaderDataChange (type , value ) {
134
135
if (type === ' start' ) {
135
136
this .start = value
136
137
}
0 commit comments