From 2af85fbfd13e6668357a5af19eb9572fe5664a1c Mon Sep 17 00:00:00 2001
From: haiyangcui <cuiocean@gmail.com>
Date: Sat, 31 Oct 2020 21:43:09 +0100
Subject: [PATCH] =?UTF-8?q?Film=E9=A1=B5=E9=9D=A2,=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE=E7=94=A8el-table=E5=AE=9E=E7=8E=B0,=E6=84=9F?=
 =?UTF-8?q?=E8=B0=A2buvta=E8=B4=A1=E7=8C=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Film.vue | 90 +++++++++++++++++++++++++++++------------
 1 file changed, 65 insertions(+), 25 deletions(-)

diff --git a/src/components/Film.vue b/src/components/Film.vue
index 69d2ed8..6aee3bf 100644
--- a/src/components/Film.vue
+++ b/src/components/Film.vue
@@ -28,8 +28,7 @@
       </div>
     </div>
     <div class="listpage-body" id="film-body" infinite-wrapper>
-      <div class="body-box" v-show="!show.find">
-        <div class="show-picture" v-if="setting.view === 'picture'">
+      <div class="show-picture" v-if="setting.view === 'picture' && !show.find">
           <Waterfall ref="waterfall" :list="list" :gutter="20" :width="240"
           :breakpoints="{ 1200: { rowPerView: 4 } }"
           animationEffect="fadeInUp"
@@ -56,29 +55,70 @@
             </template>
           </Waterfall>
           <infinite-loading force-use-infinite-wrapper :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
-        </div>
-        <div class="show-table" v-if="setting.view === 'table'">
-          <div class="zy-table">
-            <div class="tBody">
-              <ul>
-                <li v-for="(i, j) in list" :key="j" @click="detailEvent(site, i)" v-show="!setting.excludeR18Films || !containsR18Keywords(i.type)">
-                  <span class="name">{{i.name}}</span>
-                  <span class="type">{{i.type}}</span>
-                  <span class="time">{{i.year}}</span>
-                  <span class="note">{{i.note}}</span>
-                  <span class="last">{{i.last}}</span>
-                  <span class="operate">
-                    <span class="btn" @click.stop="playEvent(site, i)">播放</span>
-                    <span class="btn" @click.stop="starEvent(site, i)">收藏</span>
-                    <span class="btn" @click.stop="shareEvent(site, i)">分享</span>
-                    <span class="btn" @click.stop="downloadEvent(site, i)">下载</span>
-                  </span>
-                </li>
-              </ul>
-              <infinite-loading force-use-infinite-wrapper :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
-            </div>
-          </div>
-        </div>
+      </div>
+      <div class="show-table" v-if="setting.view === 'table' && !show.find">
+            <el-table size="mini"
+              :data="list.filter(res => !setting.excludeR18Films || !containsR18Keywords(res.type))"
+              height="100%"
+              row-key="id"
+              @row-click="(row) => detailEvent(site, row)"
+              style="width: 100%">
+              <el-table-column
+                prop="name"
+                label="片名">
+              </el-table-column>
+              <el-table-column
+                prop="director"
+                label="导演"
+                width="100">
+              </el-table-column>
+              <el-table-column
+                prop="type"
+                label="类型"
+                width="100">
+              </el-table-column>
+              <el-table-column
+                  prop="year"
+                  label="上映"
+                  align="center"
+                  width="100">
+              </el-table-column>
+              <el-table-column
+                  prop="area"
+                  label="地区"
+                  align="center"
+                  width="100">
+              </el-table-column>
+              <el-table-column
+                  prop="lang"
+                  label="语言"
+                  align="center"
+                  width="100">
+              </el-table-column>
+              <el-table-column
+                prop="note"
+                label="备注">
+              </el-table-column>
+              <el-table-column
+                label="操作"
+                header-align="center"
+                align="right"
+                width="200">
+                <template slot-scope="scope">
+                  <el-button @click.stop="playEvent(site, scope.row)" type="text">播放</el-button>
+                  <el-button @click.stop="starEvent(site, scope.row)" type="text">收藏</el-button>
+                  <el-button @click.stop="shareEvent(site, scope.row)" type="text">分享</el-button>
+                  <el-button @click.stop="downloadEvent(site, scope.row)" type="text">下载</el-button>
+                </template>
+              </el-table-column>
+              <infinite-loading
+                 slot="append"
+                 :identifier="infiniteId"
+                 @infinite="infiniteHandler"
+                 force-use-infinite-wrapper=".el-table__body-wrapper">
+                 <div slot="no-more">数据量过少时请重复操作一次，以防网站抽风</div>
+              </infinite-loading>
+            </el-table>
       </div>
       <div class="show-table" v-show="show.find">
         <el-table size="mini"