support tabel-mode

demos/table-mode/App.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="app">
+    <GithubCorner path="/item-mode" />
+    <div class="container">
+      <Header
+        title="table-mode"
+        :desciption="'Build ' + itemCount.toLocaleString() + ' items.'"
+        :start-index="start"
+        :on-data-change="onHeaderDataChange"
+      />
+      <div class="main my-table">
+        <div>
+          <table
+            cellspacing="0"
+            cellpadding="0"
+          >
+            <colgroup>
+              <col :span="columnsLength" />
+            </colgroup>
+            <thead>
+              <tr>
+                <th
+                  v-for="key in keys"
+                  :key="key"
+                  :title="key"
+                >{{key}}</th>
+              </tr>
+            </thead>
+          </table>
+        </div>
+        <!-- old item mode usage -->
+        <!-- :item="item"
+          :itemprops="getItemProps" -->
+        <virtual-list
+          :size="size"
+          :remain="remain"
+          :bench="30"
+          :start="start"
+          :isTable="true"
+          :itemcount="itemCount"
+        >
+          <template v-slot:item="targetIndex">
+            <item
+              :key="targetIndex"
+              :height="getItemProps(targetIndex).props.height"
+              :index="getItemProps(targetIndex).props.index"
+              :info="getItemProps(targetIndex).props.info"
+            ></item>
+          </template>
+        </virtual-list>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import VirtualList from 'vue-virtual-scroll-list'
+import { countStorage, getRandomUser } from '../common/util'
+
+
+const Item = Vue.extend({
+  props: {
+    info: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      default: 0
+    },
+    height: {
+      type: Number,
+      default: 0
+    },
+  },
+  computed: {
+    itemStyle() {
+      return {
+        'height': `${this.height}px`,
+        'line-height': `${this.height}px`
+      }
+    }
+  },
+  render(h) {
+    const { info, index, itemStyle } = this;
+    const tds = Object.values(info).map(v => h('td', `(${index})--${v}`))
+    return h('tr', { style: itemStyle }, tds)
+  }
+})
+
+const remain = 20
+const itemSize = 20
+const itemCount = countStorage.get()
+
+let userInfoList = []
+for (let i = 0; i < itemCount; i++) {
+  userInfoList.push(getRandomUser())
+}
+const keys = Object.keys(userInfoList[0])
+const columnsLength = keys.length
+export default {
+  name: 'App',
+  components: {
+    'virtual-list': VirtualList,
+    'item': Item,
+  },
+
+  data() {
+    return {
+      remain,
+      start: 0,
+      size: itemSize,
+      item: Item,
+      itemCount: itemCount,
+      keys: keys,
+      columnsLength: columnsLength
+    }
+  },
+
+  methods: {
+    getItemProps(itemIndex) {
+      return {
+        key: itemIndex,
+        props: {
+          height: itemSize,
+          index: itemIndex,
+          info: userInfoList[itemIndex] || {}
+        }
+      }
+    },
+
+    onHeaderDataChange(type, value) {
+      if (type === 'start') {
+        this.start = value
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import "../common/app.less";
+.my-table {
+  table {
+    display: table !important;
+    border-collapse: collapse;
+    width: 100%;
+    color: #fff;
+    font-size: 13px;
+    table-layout: fixed;
+
+    // table,
+    // tr,
+    // th,
+    // td {
+    //     // border: 1px solid #d6d6d6;
+    // }
+    tbody {
+      display: table-row-group !important;
+    }
+
+    tr {
+      td:not(:first-child) {
+        font-family: myFirstFont;
+      }
+    }
+
+    th {
+      background-color: #164893;
+      font-size: 14px;
+    }
+
+    th,
+    td {
+      padding: 8px 0;
+      text-align: center;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    tr:nth-child(2n) {
+      background: #0f2e5d;
+    }
+
+    tr {
+      transition: background-color 1s;
+    }
+
+    tr:hover {
+      background: #2170b9;
+    }
+  }
+}
+</style>

demos/table-mode/index.html

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

demos/table-mode/main.js

@@ -0,0 +1,4 @@
+import App from './App.vue'
+import createApp from '../common/createApp'
+
+createApp(App)

src/index.js

@@ -99,8 +99,12 @@
         type: [Function, Boolean], // Boolean just disable for priviate.
         default: false
       },
+      isTable: {
+        type: Boolean,
+        default: false
+      },
       item: {
-        type: Object,
+        type: [Function, Object],
         default: null
       },
       itemcount: {
@@ -504,7 +508,7 @@
         const slots = this.$slots.default || []
 
         // item-mode shoud judge from items prop.
-        if (this.item) {
+        if (this.item || this.$scopedSlots.item) {
           delta.total = this.itemcount
           if (delta.keeps > delta.total) {
             delta.end = delta.total - 1
@@ -540,7 +544,9 @@
         const renders = []
         for (let i = delta.start; i < delta.total && i <= Math.ceil(delta.end); i++) {
           let slot = null
-          if (this.item) {
+          if (this.$scopedSlots.item) {
+            slot = this.$scopedSlots.item(i)
+          } else if (this.item) {
             slot = h(this.item, this.itemprops(i))
           } else {
             slot = slots[i]
@@ -554,12 +560,18 @@
 
     render (h) {
       const dbc = this.debounce
-      const list = this.filter(h)
+      let list = this.filter(h)
       const { paddingTop, paddingBottom } = this.delta
 
-      const renderList = h(this.wtag, {
-        style: {
-          display: 'block',
+      const isTable = this.isTable
+      const wtag = isTable ? 'div' : this.wtag
+      const rtag = isTable ? 'div' : this.rtag
+      if (isTable) {
+        list = [h('table', [h('tbody', list)])]
+      }
+      const renderList = h(wtag, {
+        'style': {
+          'display': 'block',
           'padding-top': paddingTop + 'px',
           'padding-bottom': paddingBottom + 'px'
         },
@@ -574,7 +586,7 @@
         return renderList
       }
 
-      return h(this.rtag, {
+      return h(rtag, {
         ref: 'vsl',
         style: {
           display: 'block',