tangbc · xxbld · Oct 10, 2019 · Oct 12, 2019 · Oct 12, 2019
diff --git a/demos/item-mode/build.js b/demos/item-mode/build.js
diff --git a/demos/item-mode/index.html b/demos/item-mode/index.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
 <head>
   <meta charset="utf-8">
-  <title>item-mode demo of vue-virtual-scroll-list</title>
+  <title>demos\item-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>

diff --git a/demos/page-mode/build.js b/demos/page-mode/build.js
diff --git a/demos/page-mode/index.html b/demos/page-mode/index.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
 <head>
   <meta charset="utf-8">
-  <title>page-mode demo of vue-virtual-scroll-list</title>
+  <title>demos\page-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>

diff --git a/demos/scroll-element/build.js b/demos/scroll-element/build.js
diff --git a/demos/scroll-element/index.html b/demos/scroll-element/index.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
 <head>
   <meta charset="utf-8">
-  <title>scroll-element demo of vue-virtual-scroll-list</title>
+  <title>demos\scroll-element 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>

diff --git a/demos/table-mode/App.vue b/demos/table-mode/App.vue
@@ -0,0 +1,195 @@
+<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>
+        <!-- :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/build.js b/demos/table-mode/build.js
diff --git a/demos/table-mode/index.html 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>
diff --git a/demos/table-mode/main.js 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/demos/variable-height/build.js b/demos/variable-height/build.js
diff --git a/demos/variable-height/index.html b/demos/variable-height/index.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
 <head>
   <meta charset="utf-8">
-  <title>variable-height demo of vue-virtual-scroll-list</title>
+  <title>demos\variable-height 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>

diff --git a/demos/vfor-mode/build.js b/demos/vfor-mode/build.js
diff --git a/demos/vfor-mode/index.html b/demos/vfor-mode/index.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
 <head>
   <meta charset="utf-8">
-  <title>vfor-mode demo of vue-virtual-scroll-list</title>
+  <title>demos\vfor-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>

diff --git a/demos/webpack.conf.js b/demos/webpack.conf.js
@@ -8,13 +8,14 @@ const isProduction = process.env.NODE_ENV === 'production'
 const isDirectory = (source) => lstatSync(source).isDirectory()
 const getDirectories = (source) => readdirSync(source).map((name) => path.join(source, name)).filter(isDirectory)
 const isDemoDirectory = (source) => !['dev', 'common'].includes(source)
-const demoDirectorys = getDirectories('demos').map((demo) => demo.split('/').pop()).filter(isDemoDirectory)
+const demoDirectorys = getDirectories('demos').map((demo) => demo.split('/').pop()).filter(isDemoDirectory).filter(v => !v.includes('common'))
 
 console.log('\x1b[36m', `Building demos: [ ${demoDirectorys.join(', ')} ].`, '\x1b[0m')
 
 let multiConfigs = []
 demoDirectorys.forEach((entry) => {
-  const _entry = path.resolve(__dirname, entry)
+  const _entry = path.resolve(__dirname, '../', entry)
+  // console.log('\x1b[36m', `_entry: [ ${_entry} ].`, '\x1b[0m')
   multiConfigs.push({
     name: entry,
     entry: `${_entry}/main.js`,

diff --git a/demos/without-virtual-list/build.js b/demos/without-virtual-list/build.js
diff --git a/demos/without-virtual-list/index.html b/demos/without-virtual-list/index.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
 <head>
   <meta charset="utf-8">
-  <title>without-virtual-list demo of vue-virtual-scroll-list</title>
+  <title>demos\without-virtual-list 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>