From dd98569864bd407b2eb0b2f2ab2eed5b2f8e1d80 Mon Sep 17 00:00:00 2001
From: xuliangzhan <xu_liangzhan@163.com>
Date: Wed, 4 Mar 2020 15:28:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/views/table/bad/LineHeight.vue | 56 ++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 5 deletions(-)

diff --git a/examples/views/table/bad/LineHeight.vue b/examples/views/table/bad/LineHeight.vue
index 8342cc40d..cd65e7abe 100644
--- a/examples/views/table/bad/LineHeight.vue
+++ b/examples/views/table/bad/LineHeight.vue
@@ -2,7 +2,7 @@
   <div>
     <p class="tip">
       <span class="red">Warning 1：动态行高与虚拟滚动的取舍</span><br>
-      <span class="red">（注：关闭高性能的虚拟滚动来换取支持动态行高，卡不卡顿取决于数据量，使用这个方式的所有问题都应该自行处理）</span>
+      <span class="red">（注：关闭高性能的虚拟滚动来换取支持动态行高，流不流畅取决于数据量，使用这个方式的所有问题都应该自行处理）</span>
     </p>
 
     <vxe-table
@@ -12,9 +12,32 @@
       :data="tableData"
       :optimization="{scrollX: {gt: 500}, scrollY: {gt: 50000}}">
       <vxe-table-column type="seq" width="80" fixed="left"></vxe-table-column>
-      <vxe-table-column field="name" title="Name"></vxe-table-column>
+      <vxe-table-column field="name" title="Name">
+        <template v-slot="{ row, rowIndex }">
+          <template v-if="rowIndex % 4 === 0">
+            <div>{{ row.name }}</div>
+            <div style="color: red">{{ row.age }}</div>
+            <div>{{ row.role }}</div>
+          </template>
+          <template v-else-if="rowIndex % 3 === 0">
+            <img src="static/other/img2.gif" style="width: 60px;">
+          </template>
+          <template v-else>
+            <span>{{ row.name }}</span>
+          </template>
+        </template>
+      </vxe-table-column>
       <vxe-table-column field="sex" title="Sex"></vxe-table-column>
-      <vxe-table-column field="age" title="Age"></vxe-table-column>
+      <vxe-table-column field="age" title="Age">
+        <template v-slot="{ row, rowIndex }">
+          <template v-if="rowIndex % 5 === 0">
+            <img src="static/other/img1.gif" style="width: 60px;">
+          </template>
+          <template v-else>
+            <span>{{ row.age }}</span>
+          </template>
+        </template>
+      </vxe-table-column>
       <vxe-table-column field="role" title="Role"></vxe-table-column>
     </vxe-table>
 
@@ -43,9 +66,32 @@ export default {
           :data="tableData"
           :optimization="{scrollX: {gt: 500}, scrollY: {gt: 50000}}">
           <vxe-table-column type="seq" width="80" fixed="left"></vxe-table-column>
-          <vxe-table-column field="name" title="Name"></vxe-table-column>
+          <vxe-table-column field="name" title="Name">
+            <template v-slot="{ row, rowIndex }">
+              <template v-if="rowIndex % 4 === 0">
+                <div>{{ row.name }}</div>
+                <div style="color: red">{{ row.age }}</div>
+                <div>{{ row.role }}</div>
+              </template>
+              <template v-else-if="rowIndex % 3 === 0">
+                <img src="static/other/img2.gif" style="width: 60px;">
+              </template>
+              <template v-else>
+                <span>{{ row.name }}</span>
+              </template>
+            </template>
+          </vxe-table-column>
           <vxe-table-column field="sex" title="Sex"></vxe-table-column>
-          <vxe-table-column field="age" title="Age"></vxe-table-column>
+          <vxe-table-column field="age" title="Age">
+            <template v-slot="{ row, rowIndex }">
+              <template v-if="rowIndex % 5 === 0">
+                <img src="static/other/img1.gif" style="width: 60px;">
+              </template>
+              <template v-else>
+                <span>{{ row.age }}</span>
+              </template>
+            </template>
+          </vxe-table-column>
           <vxe-table-column field="role" title="Role"></vxe-table-column>
         </vxe-table>
         `,