From 4bfdb2e055a5559abe884e5e773a91c84bcc1aef Mon Sep 17 00:00:00 2001
From: xxbld <1024920618@qq.com>
Date: Sun, 13 Oct 2019 15:28:59 +0800
Subject: [PATCH 1/4] support tabel-mode; allow scopedSlots.default as
 item-mode compontent render; item  type: set [Function, Object],

---
 demos/table-mode/App.vue    | 196 ++++++++++++++++++++++++++++++++++++
 demos/table-mode/index.html |  11 ++
 demos/table-mode/main.js    |   4 +
 src/index.js                |  24 +++--
 4 files changed, 229 insertions(+), 6 deletions(-)
 create mode 100644 demos/table-mode/App.vue
 create mode 100644 demos/table-mode/index.html
 create mode 100644 demos/table-mode/main.js

diff --git a/demos/table-mode/App.vue b/demos/table-mode/App.vue
new file mode 100644
index 0000000..260013d
--- /dev/null
+++ b/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="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>
diff --git a/demos/table-mode/index.html b/demos/table-mode/index.html
new file mode 100644
index 0000000..c80f20e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/demos/table-mode/main.js b/demos/table-mode/main.js
new file mode 100644
index 0000000..ec627bb
--- /dev/null
+++ b/demos/table-mode/main.js
@@ -0,0 +1,4 @@
+import App from './App.vue'
+import createApp from '../common/createApp'
+
+createApp(App)
diff --git a/src/index.js b/src/index.js
index 77fe42b..82db7ed 100644
--- a/src/index.js
+++ b/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: {
@@ -505,7 +509,7 @@
         const slots = this.$slots.default || []
 
         // item-mode shoud judge from items prop.
-        if (this.item) {
+        if (this.item || this.$scopedSlots.default) {
           delta.total = this.itemcount
           if (delta.keeps > delta.total) {
             delta.end = delta.total - 1
@@ -541,7 +545,9 @@
         let renders = []
         for (let i = delta.start; i < delta.total && i <= Math.ceil(delta.end); i++) {
           let slot = null
-          if (this.item) {
+          if (this.$scopedSlots.default) {
+            slot = this.$scopedSlots.default(i)
+          } else if (this.item) {
             slot = h(this.item, this.itemprops(i))
           } else {
             slot = slots[i]
@@ -555,10 +561,16 @@
 
     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, {
+      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',
@@ -575,7 +587,7 @@
         return renderList
       }
 
-      return h(this.rtag, {
+      return h(rtag, {
         'ref': 'vsl',
         'style': {
           'display': 'block',

From 3ff55dbd1f929910cf74e0d52697d7faadec734e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E9=98=B3?= <1024920618@qq.com>
Date: Tue, 22 Oct 2019 10:22:30 +0800
Subject: [PATCH 2/4] Update index.js

---
 src/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/index.js b/src/index.js
index cf35e8e..7154b69 100644
--- a/src/index.js
+++ b/src/index.js
@@ -587,11 +587,11 @@
       }
 
       return h(rtag, {
-        'ref': 'vsl',
-        'style': {
-          'display': 'block',
-          'overflow-y': 'auto',
-          'height': this.size * this.remain + 'px'
+        ref: 'vsl',
+        style: {
+          display: 'block',
+          'overflow-y': this.size >= this.remain ? 'auto' : 'inital',
+          height: this.size * this.remain + 'px'
         },
         on: {
           '&scroll': dbc ? _debounce(this.onScroll.bind(this), dbc) : this.onScroll

From d592a2ef0fe6fb5a2019dad67ad51f46769feba1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E9=98=B3?= <1024920618@qq.com>
Date: Mon, 4 Nov 2019 18:32:19 +0800
Subject: [PATCH 3/4] Update App.vue

---
 demos/table-mode/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demos/table-mode/App.vue b/demos/table-mode/App.vue
index 260013d..aa69fd8 100644
--- a/demos/table-mode/App.vue
+++ b/demos/table-mode/App.vue
@@ -39,7 +39,7 @@
           :isTable="true"
           :itemcount="itemCount"
         >
-          <template v-slot="targetIndex">
+          <template v-slot:item="targetIndex">
             <item
               :key="targetIndex"
               :height="getItemProps(targetIndex).props.height"

From 5c8f5f203a3098104f8b791b16d25bfe08b437e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E9=98=B3?= <1024920618@qq.com>
Date: Mon, 4 Nov 2019 18:33:43 +0800
Subject: [PATCH 4/4] Update index.js

change $scopedSlots.default to $scopedSlots.item
---
 src/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index 7154b69..66e0dbf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -508,7 +508,7 @@
         const slots = this.$slots.default || []
 
         // item-mode shoud judge from items prop.
-        if (this.item || this.$scopedSlots.default) {
+        if (this.item || this.$scopedSlots.item) {
           delta.total = this.itemcount
           if (delta.keeps > delta.total) {
             delta.end = delta.total - 1
@@ -544,8 +544,8 @@
         const renders = []
         for (let i = delta.start; i < delta.total && i <= Math.ceil(delta.end); i++) {
           let slot = null
-          if (this.$scopedSlots.default) {
-            slot = this.$scopedSlots.default(i)
+          if (this.$scopedSlots.item) {
+            slot = this.$scopedSlots.item(i)
           } else if (this.item) {
             slot = h(this.item, this.itemprops(i))
           } else {