Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit babc58c

Browse files
tangbctangbc
committed
Merge branch 'xxbld-master'
2 parents 4625b74 + 5c8f5f2 commit babc58c

File tree

4 files changed

+231
-8
lines changed

4 files changed

+231
-8
lines changed

‎demos/table-mode/App.vue

+196
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
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"
41+
>
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>
51+
</div>
52+
</div>
53+
</div>
54+
</template>
55+
56+
<script>
57+
import Vue from 'vue';
58+
import VirtualList from 'vue-virtual-scroll-list'
59+
import { countStorage, getRandomUser } from '../common/util'
60+
61+
62+
const Item = Vue.extend({
63+
props: {
64+
info: {
65+
type: Object,
66+
required: true
67+
},
68+
index: {
69+
type: Number,
70+
default: 0
71+
},
72+
height: {
73+
type: Number,
74+
default: 0
75+
},
76+
},
77+
computed: {
78+
itemStyle() {
79+
return {
80+
'height': `${this.height}px`,
81+
'line-height': `${this.height}px`
82+
}
83+
}
84+
},
85+
render(h) {
86+
const { info, index, itemStyle } = this;
87+
const tds = Object.values(info).map(v => h('td', `(${index})--${v}`))
88+
return h('tr', { style: itemStyle }, tds)
89+
}
90+
})
91+
92+
const remain = 20
93+
const itemSize = 20
94+
const itemCount = countStorage.get()
95+
96+
let userInfoList = []
97+
for (let i = 0; i < itemCount; i++) {
98+
userInfoList.push(getRandomUser())
99+
}
100+
const keys = Object.keys(userInfoList[0])
101+
const columnsLength = keys.length
102+
export default {
103+
name: 'App',
104+
components: {
105+
'virtual-list': VirtualList,
106+
'item': Item,
107+
},
108+
109+
data() {
110+
return {
111+
remain,
112+
start: 0,
113+
size: itemSize,
114+
item: Item,
115+
itemCount: itemCount,
116+
keys: keys,
117+
columnsLength: columnsLength
118+
}
119+
},
120+
121+
methods: {
122+
getItemProps(itemIndex) {
123+
return {
124+
key: itemIndex,
125+
props: {
126+
height: itemSize,
127+
index: itemIndex,
128+
info: userInfoList[itemIndex] || {}
129+
}
130+
}
131+
},
132+
133+
onHeaderDataChange(type, value) {
134+
if (type === 'start') {
135+
this.start = value
136+
}
137+
}
138+
}
139+
}
140+
</script>
141+
142+
<style lang="less">
143+
@import "../common/app.less";
144+
.my-table {
145+
table {
146+
display: table !important;
147+
border-collapse: collapse;
148+
width: 100%;
149+
color: #fff;
150+
font-size: 13px;
151+
table-layout: fixed;
152+
153+
// table,
154+
// tr,
155+
// th,
156+
// td {
157+
// // border: 1px solid #d6d6d6;
158+
// }
159+
tbody {
160+
display: table-row-group !important;
161+
}
162+
163+
tr {
164+
td:not(:first-child) {
165+
font-family: myFirstFont;
166+
}
167+
}
168+
169+
th {
170+
background-color: #164893;
171+
font-size: 14px;
172+
}
173+
174+
th,
175+
td {
176+
padding: 8px 0;
177+
text-align: center;
178+
white-space: nowrap;
179+
text-overflow: ellipsis;
180+
overflow: hidden;
181+
}
182+
183+
tr:nth-child(2n) {
184+
background: #0f2e5d;
185+
}
186+
187+
tr {
188+
transition: background-color 1s;
189+
}
190+
191+
tr:hover {
192+
background: #2170b9;
193+
}
194+
}
195+
}
196+
</style>

‎demos/table-mode/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>demos\table-mode demo of vue-virtual-scroll-list</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="text/javascript" src="build.js"></script></body>
11+
</html>

‎demos/table-mode/main.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import App from './App.vue'
2+
import createApp from '../common/createApp'
3+
4+
createApp(App)

‎src/index.js

+20-8
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,12 @@
9999
type: [Function, Boolean], // Boolean just disable for priviate.
100100
default: false
101101
},
102+
isTable: {
103+
type: Boolean,
104+
default: false
105+
},
102106
item: {
103-
type: Object,
107+
type: [Function, Object],
104108
default: null
105109
},
106110
itemcount: {
@@ -504,7 +508,7 @@
504508
const slots = this.$slots.default || []
505509

506510
// item-mode shoud judge from items prop.
507-
if (this.item) {
511+
if (this.item || this.$scopedSlots.item) {
508512
delta.total = this.itemcount
509513
if (delta.keeps > delta.total) {
510514
delta.end = delta.total - 1
@@ -540,7 +544,9 @@
540544
const renders = []
541545
for (let i = delta.start; i < delta.total && i <= Math.ceil(delta.end); i++) {
542546
let slot = null
543-
if (this.item) {
547+
if (this.$scopedSlots.item) {
548+
slot = this.$scopedSlots.item(i)
549+
} else if (this.item) {
544550
slot = h(this.item, this.itemprops(i))
545551
} else {
546552
slot = slots[i]
@@ -554,12 +560,18 @@
554560

555561
render (h) {
556562
const dbc = this.debounce
557-
const list = this.filter(h)
563+
let list = this.filter(h)
558564
const { paddingTop, paddingBottom } = this.delta
559565

560-
const renderList = h(this.wtag, {
561-
style: {
562-
display: 'block',
566+
const isTable = this.isTable
567+
const wtag = isTable ? 'div' : this.wtag
568+
const rtag = isTable ? 'div' : this.rtag
569+
if (isTable) {
570+
list = [h('table', [h('tbody', list)])]
571+
}
572+
const renderList = h(wtag, {
573+
'style': {
574+
'display': 'block',
563575
'padding-top': paddingTop + 'px',
564576
'padding-bottom': paddingBottom + 'px'
565577
},
@@ -574,7 +586,7 @@
574586
return renderList
575587
}
576588

577-
return h(this.rtag, {
589+
return h(rtag, {
578590
ref: 'vsl',
579591
style: {
580592
display: 'block',

0 commit comments

Comments
 (0)