From d22cb190dc6dced030ea6b3fab9654da258c621e Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Thu, 26 Dec 2019 09:47:36 +0800
Subject: [PATCH] 新式表格支持直接配置渲染项参数

---
 examples/views/page/other.vue           | 15 ++++++++++++---
 examples/views/page/table-new/index.vue | 14 ++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index 48830b8..6efc7aa 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -21,11 +21,11 @@
       <template #value-location-district-province="{ value }">
         <el-tag type="success" size="mini">{{ value }}</el-tag>
       </template>
-      <template #location-district-city>
+      <!-- <template #location-district-city>
         <el-table-column label="城市测试" prop="location-district-city">
           <el-tag type="danger" size="mini" slot-scope="{ row: { location: { district: { city } = {} } = {} } }">{{ city }}</el-tag>
         </el-table-column>
-      </template>
+      </template> -->
     </eg-table>
     <!-- <p>这是一个非markdown页面</p>
     <pre>{{ model }}</pre>
@@ -73,7 +73,16 @@ export default {
                 group: { key: 'district' },
                 list: [
                   { type: 'el-input', label: '省', key: 'province', rules: [{ required: true, message: '请输入省' }] },
-                  { type: 'el-input', label: '市', key: 'city' },
+                  // { type: 'el-input', label: '市', key: 'city', render: { type: 'el-tag', props: { type: 'danger', size: 'mini' } } },
+                  { type: 'el-input', label: '市', key: 'city',
+                    render: {
+                      type: 'span', props: { href: 'https:///www.baidu.com/' }, style: { color: 'red' },
+                      children({ row }) {
+                        const { location: { district: { city } = {} } = {} } = row;
+                        return city ? `${city}[城市]` : '';
+                      }
+                    }
+                  },
                 ],
               },
               {
diff --git a/examples/views/page/table-new/index.vue b/examples/views/page/table-new/index.vue
index 1d30567..890ed1b 100644
--- a/examples/views/page/table-new/index.vue
+++ b/examples/views/page/table-new/index.vue
@@ -21,6 +21,16 @@
                 :row="row" :value="$_get(row, item.fullKey)" :column="column" :index="$index"
               ></slot>
             </el-table-column>
+            <el-table-column v-else-if="item.render" v-bind="item" :prop="item.agentKey || item.fullKey || item.key"
+              :key="index" :min-width="item.minWidth || item['min-width']"
+            >
+              <template slot-scope="slotScope">
+                <component :is="item.render.type" v-bind="item.render.props" :style="item.render.style">
+                  <template v-if="item.render.children">{{ bindItemRenderChildren(item, slotScope) }}</template>
+                  <template v-else>{{ $_get(row, item.fullKey) }}</template>
+                </component>
+              </template>
+            </el-table-column>
             <el-table-column v-else v-bind="item" :prop="item.agentKey || item.fullKey || item.key"
               :key="index" :min-width="item.minWidth || item['min-width']"
             ></el-table-column>
@@ -124,6 +134,10 @@ export default {
       }
       return result;
     },
+    // 处理表格项渲染时的子值
+    bindItemRenderChildren(item, scope) {
+      return item.render.children instanceof Function ? item.render.children(scope) : this.$_get(scope.row, item.fullKey)
+    }
   }
 };
 </script>
\ No newline at end of file
--
libgit2 0.21.0