From 08fd628d1f5badec33d62d12198a58a4eb4f710c Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Sat, 27 May 2017 15:13:10 +0800
Subject: [PATCH] Table support expand

---
 examples/components/table.vue       | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/routers/table.vue          |  92 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------
 src/components/table/cell.vue       |  27 ++++++++++++++++++++++++---
 src/components/table/expand.vue     |  37 +++++++++++++++++++++++++++++++++++++
 src/components/table/table-body.vue |  67 ++++++++++++++++++++++++++++++++++++++++++++++---------------------
 src/components/table/table-head.vue |   3 ++-
 src/components/table/table.vue      |  21 +++++++++++++++++++--
 src/styles/components/table.less    |  29 +++++++++++++++++++++++++++++
 8 files changed, 339 insertions(+), 38 deletions(-)
 create mode 100644 examples/components/table.vue
 create mode 100644 src/components/table/expand.vue

diff --git a/examples/components/table.vue b/examples/components/table.vue
new file mode 100644
index 0000000..e882eb2
--- /dev/null
+++ b/examples/components/table.vue
@@ -0,0 +1,101 @@
+<template>
+    <Table width="550" border :columns="columns2" :data="data3"></Table>
+</template>
+<script>
+    export default {
+        name: 'etable',
+        data () {
+            return {
+                columns2: [
+                    {
+                        title: '姓名',
+                        key: 'name',
+                        width: 100,
+                        fixed: 'left'
+                    },
+                    {
+                        title: '年龄',
+                        key: 'age',
+                        width: 100
+                    },
+                    {
+                        title: '省份',
+                        key: 'province',
+                        width: 100
+                    },
+                    {
+                        title: '市区',
+                        key: 'city',
+                        width: 100
+                    },
+                    {
+                        title: '地址',
+                        key: 'address',
+                        width: 200
+                    },
+                    {
+                        title: '邮编',
+                        key: 'zip',
+                        width: 100
+                    },
+                    {
+                        title: '操作',
+                        key: 'action',
+                        fixed: 'right',
+                        width: 120,
+                        render: (h, params) => {
+                            return h('div', [
+                                h('Button', {
+                                    props: {
+                                        type: 'text',
+                                        size: 'small'
+                                    }
+                                }, '查看'),
+                                h('Button', {
+                                    props: {
+                                        type: 'text',
+                                        size: 'small'
+                                    }
+                                }, '编辑')
+                            ]);
+                        }
+                    }
+                ],
+                data3: [
+                    {
+                        name: '王小明',
+                        age: 18,
+                        address: '北京市朝阳区芍药居',
+                        province: '北京市',
+                        city: '朝阳区',
+                        zip: 100000
+                    },
+                    {
+                        name: '张小刚',
+                        age: 25,
+                        address: '北京市海淀区西二旗',
+                        province: '北京市',
+                        city: '海淀区',
+                        zip: 100000
+                    },
+                    {
+                        name: '李小红',
+                        age: 30,
+                        address: '上海市浦东新区世纪大道',
+                        province: '上海市',
+                        city: '浦东新区',
+                        zip: 100000
+                    },
+                    {
+                        name: '周小伟',
+                        age: 26,
+                        address: '深圳市南山区深南大道',
+                        province: '广东',
+                        city: '南山区',
+                        zip: 100000
+                    }
+                ]
+            }
+        }
+    }
+</script>
diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 23adae4..e42834a 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,21 +1,33 @@
 <template>
-    <Table border :columns="columns5" :data="data5"></Table>
+    <Table :columns="columns7" :data="data6" @on-expand="expand"></Table>
 </template>
 <script>
+    import etable from '../components/table.vue';
     export default {
+        components: { etable },
         data () {
             return {
-                columns5: [
+                columns7: [
                     {
-                        title: '日期',
-                        key: 'date',
-                        sortable: true
+                        type: 'expand',
+                        width: 50,
+                        render: (h, params) => {
+//                            return h(etable);
+                            return h('div', params.row.name)
+                        }
                     },
                     {
                         title: '姓名',
                         key: 'name',
                         render: (h, params) => {
-                            return h('div', params.row.name);
+                            return h('div', [
+                                h('Icon', {
+                                    props: {
+                                        type: 'person'
+                                    }
+                                }),
+                                h('strong', params.row.name)
+                            ]);
                         }
                     },
                     {
@@ -26,23 +38,81 @@
                     {
                         title: '地址',
                         key: 'address'
+                    },
+                    {
+                        title: '操作',
+                        key: 'action',
+                        width: 150,
+                        align: 'center',
+                        render: (h, params) => {
+                            return h('div', [
+                                h('Button', {
+                                    props: {
+                                        type: 'primary',
+                                        size: 'small'
+                                    },
+                                    style: {
+                                        marginRight: '5px'
+                                    },
+                                    on: {
+                                        click: () => {
+                                            this.show(params.index)
+                                        }
+                                    }
+                                }, '查看'),
+                                h('Button', {
+                                    props: {
+                                        type: 'error',
+                                        size: 'small'
+                                    },
+                                    on: {
+                                        click: () => {
+                                            this.remove(params.index)
+                                        }
+                                    }
+                                }, '删除')
+                            ]);
+                        }
                     }
                 ],
-                data5: [
+                data6: [
                     {
                         name: '王小明',
                         age: 18,
-                        address: '北京市朝阳区芍药居',
-                        date: '2016-10-03'
+                        address: '北京市朝阳区芍药居'
                     },
                     {
                         name: '张小刚',
                         age: 25,
-                        address: '北京市海淀区西二旗',
-                        date: '2016-10-01'
+                        address: '北京市海淀区西二旗'
+                    },
+                    {
+                        name: '李小红',
+                        age: 30,
+                        address: '上海市浦东新区世纪大道'
+                    },
+                    {
+                        name: '周小伟',
+                        age: 26,
+                        address: '深圳市南山区深南大道'
                     }
                 ]
             }
+        },
+        methods: {
+            show (index) {
+                this.$Modal.info({
+                    title: '用户信息',
+                    content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
+                })
+            },
+            remove (index) {
+                this.data6.splice(index, 1);
+            },
+            expand (row, s) {
+//                console.log(row);
+//                console.log(s);
+            }
         }
     }
 </script>
diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index 9368e0b..d4dfa84 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.vue
@@ -5,16 +5,22 @@
             <Checkbox :value="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
         </template>
         <template v-if="renderType === 'normal'"><span v-html="row[column.key]"></span></template>
+        <template v-if="renderType === 'expand'">
+            <div :class="expandCls" @click="toggleExpand">
+                <Icon type="ios-arrow-right"></Icon>
+            </div>
+        </template>
     </div>
 </template>
 <script>
     import Vue from 'vue';
+    import Icon from '../icon/icon.vue';
     import Checkbox from '../checkbox/checkbox.vue';
     import { findComponentUpward } from '../../utils/assist';
 
     export default {
         name: 'TableCell',
-        components: { Checkbox },
+        components: { Icon, Checkbox },
         props: {
             prefixCls: String,
             row: Object,
@@ -23,6 +29,7 @@
             index: Number,           // _index of data
             checked: Boolean,
             disabled: Boolean,
+            expanded: Boolean,
             fixed: {
                 type: [Boolean, String],
                 default: false
@@ -41,14 +48,23 @@
                     `${this.prefixCls}-cell`,
                     {
                         [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
-                        [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false
+                        [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
+                        [`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand'
                     }
                 ];
+            },
+            expandCls () {
+                return [
+                    `${this.prefixCls}-cell-expand`,
+                    {
+                        [`${this.prefixCls}-cell-expand-expanded`]: this.expanded
+                    }
+                ]
             }
         },
         methods: {
             compile () {
-                if (this.column.render) {
+                if (this.column.render && this.renderType === 'render') {
                     // 兼容真 Render，后期废弃旧用法
                     let isRealRender = true;
                     const Table = findComponentUpward(this, 'Table');
@@ -114,6 +130,9 @@
             },
             toggleSelect () {
                 this.$parent.$parent.toggleSelect(this.index);
+            },
+            toggleExpand () {
+                this.$parent.$parent.toggleExpand(this.index);
             }
         },
         created () {
@@ -121,6 +140,8 @@
                 this.renderType = 'index';
             } else if (this.column.type === 'selection') {
                 this.renderType = 'selection';
+            } else if (this.column.type === 'expand') {
+                this.renderType = 'expand';
             } else if (this.column.render) {
                 this.renderType = 'render';
             } else {
diff --git a/src/components/table/expand.vue b/src/components/table/expand.vue
new file mode 100644
index 0000000..fc9a11d
--- /dev/null
+++ b/src/components/table/expand.vue
@@ -0,0 +1,37 @@
+<template>
+    <div ref="cell"></div>
+</template>
+<script>
+    import Vue from 'vue';
+    export default {
+        name: 'TableExpand',
+        props: {
+            row: Object,
+            render: Function,
+            index: Number,
+        },
+        methods: {
+            compile () {
+                if (this.render) {
+                    this.$el.innerHTML = '';
+                    const component = new Vue({
+                        functional: true,
+                        render: (h) => {
+                            return this.render(h, {
+                                row: this.row,
+                                index: this.index
+                            });
+                        }
+                    });
+                    const Cell = component.$mount();
+                    this.$refs.cell.appendChild(Cell.$el);
+                }
+            }
+        },
+        mounted () {
+            this.$nextTick(() => {
+                this.compile();
+            });
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue
index 73dd9d8..59e72e7 100644
--- a/src/components/table/table-body.vue
+++ b/src/components/table/table-body.vue
@@ -4,39 +4,47 @@
             <col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)">
         </colgroup>
         <tbody :class="[prefixCls + '-tbody']">
-            <tr
-                v-for="(row, index) in data"
-                :key="row"
-                :class="rowClasses(row._index)"
-                @mouseenter.stop="handleMouseIn(row._index)"
-                @mouseleave.stop="handleMouseOut(row._index)"
-                @click.stop="clickCurrentRow(row._index)"
-                @dblclick.stop="dblclickCurrentRow(row._index)">
-                <td v-for="column in columns" :class="alignCls(column, row)">
-                    <Cell
-                        :fixed="fixed"
-                        :prefix-cls="prefixCls"
-                        :row="row"
-                        :column="column"
-                        :natural-index="index"
-                        :index="row._index"
-                        :checked="rowChecked(row._index)"
-                        :disabled="rowDisabled(row._index)"
+            <template v-for="(row, index) in data">
+                <tr
+                    :key="row"
+                    :class="rowClasses(row._index)"
+                    @mouseenter.stop="handleMouseIn(row._index)"
+                    @mouseleave.stop="handleMouseOut(row._index)"
+                    @click.stop="clickCurrentRow(row._index)"
+                    @dblclick.stop="dblclickCurrentRow(row._index)">
+                    <td v-for="column in columns" :class="alignCls(column, row)">
+                        <Cell
+                            :fixed="fixed"
+                            :prefix-cls="prefixCls"
+                            :row="row"
+                            :column="column"
+                            :natural-index="index"
+                            :index="row._index"
+                            :checked="rowChecked(row._index)"
+                            :disabled="rowDisabled(row._index)"
+                            :expanded="rowExpanded(row._index)"
                         ></Cell>
-                </td>
-            </tr>
+                    </td>
+                </tr>
+                <tr v-if="rowExpanded(row._index)">
+                    <td :colspan="columns.length">
+                        <Expand :row="row" :render="expandRender" :index="row._index"></Expand>
+                    </td>
+                </tr>
+            </template>
         </tbody>
     </table>
 </template>
 <script>
     // todo :key="row"
     import Cell from './cell.vue';
+    import Expand from './expand.vue';
     import Mixin from './mixin';
 
     export default {
         name: 'TableBody',
         mixins: [ Mixin ],
-        components: { Cell },
+        components: { Cell, Expand },
         props: {
             prefixCls: String,
             styleObject: Object,
@@ -49,6 +57,20 @@
                 default: false
             }
         },
+        computed: {
+            expandRender () {
+                let render = function () {
+                    return '';
+                };
+                for (let i = 0; i < this.columns.length; i++) {
+                    const column = this.columns[i];
+                    if (column.type && column.type === 'expand') {
+                        if (column.render) render = column.render;
+                    }
+                }
+                return render;
+            }
+        },
         methods: {
             rowClasses (_index) {
                 return [
@@ -66,6 +88,9 @@
             rowDisabled(_index){
                 return this.objData[_index] && this.objData[_index]._isDisabled;
             },
+            rowExpanded(_index){
+                return this.objData[_index] && this.objData[_index]._isExpanded;
+            },
             rowClsName (_index) {
                 return this.$parent.rowClassName(this.objData[_index], _index);
             },
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 72bb50d..aa1d69c 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -7,7 +7,8 @@
             <tr>
                 <th v-for="(column, index) in columns" :class="alignCls(column)">
                     <div :class="cellClasses(column)">
-                        <template v-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template>
+                        <template v-if="column.type === 'expand'"></template>
+                        <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template>
                         <template v-else>
                             <span v-html="renderHeader(column, index)"></span>
                             <span :class="[prefixCls + '-sort']" v-if="column.sortable">
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index d8d5b5f..c86a49c 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -404,6 +404,18 @@
                 }
                 this.$emit('on-selection-change', selection);
             },
+            toggleExpand (_index) {
+                let data = {};
+
+                for (let i in this.objData) {
+                    if (parseInt(i) === _index) {
+                        data = this.objData[i];
+                    }
+                }
+                const status = !data._isExpanded;
+                this.objData[_index]._isExpanded = status;
+                this.$emit('on-expand', JSON.parse(JSON.stringify(this.cloneData[_index])), status);
+            },
             selectAll (status) {
                 // this.rebuildData.forEach((data) => {
                 //     if(this.objData[data._index]._isDisabled){
@@ -581,9 +593,9 @@
                 this.data.forEach((row, index) => {
                     const newRow = deepCopy(row);// todo 直接替换
                     newRow._isHover = false;
-                    if(newRow._disabled){
+                    if (newRow._disabled) {
                         newRow._isDisabled = newRow._disabled;
-                    }else{
+                    } else {
                         newRow._isDisabled = false;
                     }
                     if (newRow._checked) {
@@ -591,6 +603,11 @@
                     } else {
                         newRow._isChecked = false;
                     }
+                    if (newRow._expanded) {
+                        newRow._isExpanded = newRow._expanded;
+                    } else {
+                        newRow._isExpanded = false;
+                    }
                     if (newRow._highlight) {
                         newRow._isHighlight = newRow._highlight;
                     } else {
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index 576deb5..4507ac7 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -145,6 +145,24 @@
             overflow: hidden;
             text-overflow: ellipsis;
         }
+
+        &-with-expand{
+            height: 47px;
+            line-height: 47px;
+            padding: 0;
+            text-align: center;
+        }
+
+        &-expand{
+            cursor: pointer;
+            transition: transform @transition-time @ease-in-out;
+            i{
+                font-size: @font-size-base;
+            }
+            &-expanded{
+                transform: rotate(90deg);
+            }
+        }
     }
     &-hidden{
         visibility: hidden;
@@ -184,6 +202,13 @@
             height: 60px;
             line-height: 60px;
         }
+        .@{table-prefix-cls}-cell-with-expand{
+            height: 59px;
+            line-height: 59px;
+            i{
+                font-size: @font-size-base+2;
+            }
+        }
     }
 
     &-small{
@@ -197,6 +222,10 @@
             height: 40px;
             line-height: 40px;
         }
+        .@{table-prefix-cls}-cell-with-expand{
+            height: 39px;
+            line-height: 39px;
+        }
     }
 
     &-row-highlight,
--
libgit2 0.21.4