vue 实现跨行表格（数据接口获取）——转载

在线预览地址：https://run.iviewui.com/JsVaE8cl
之前做的传统表格用到跨行，会在表格中再嵌套一个表格，代码很不美观，
所以这次用vue做了单个table，实现了这个功能：标题独立，左右的tr分开。

 

<template>
    <table
        cellspacing="0"
        border="1">
        <!-- 顶部title -->
        <tr>
            <th>订单号</th>
            <th>创建时间</th>
            <th>订单内容</th>
            <th>数量</th>
            <th>订单金额</th>
            <th>操作</th>
        </tr>
        <!-- 暂无数据时显示 -->
        <tr v-if="!tableInfo">
                <td :colspan="6">
                    暂无数据
                </td>
        </tr>
        <!-- template不会被渲染 -->
        <template v-for="(item,index) in tableInfo">
            <!-- 左侧跨行区域 -->
            <tr>
                <td :rowspan="item.orderItemList.length+1">{{item.orderId}}</td>
                <td :rowspan="item.orderItemList.length+1">{{item.createTime}}</td>
            </tr>
            <!-- 右侧数据 -->
            <tr v-for="(child,index) in item.orderItemList">
                <td>
                    {{child.content}}
                </td>
                <td>
                    {{child.quantity}}
                </td>
                <td>
                    {{child.money}}元
                </td>
                <!-- 右侧跨行数据 -->
                <!-- 由于在遍历中所以只显示第一个 -->
                <td :rowspan="item.orderItemList.length+1" 
                    v-if="index == 0">
                    <Button type="primary" size="small">支付</Button>
                    <Button type="warning" size="small">取消</Button>
                </td>
            </tr>
        </template>
    </table>
</template>
<script>
    export default {
        data(){
            return{
                // 数据格式
                tableInfo:[{
                    orderId:'002111000',
                    amount:'5300',
                    createTime:'2018-11-01 17:40:25',
                    orderItemList:[
                        {
                            id:'113',
                            content:'续费三年',
                            quantity:'1',
                            money:'3800',
                        },
                        {   id:'114',
                            content:'购买10个账号',
                            quantity:'1',
                            money:'1500',
                        }
                    ],
                },{
                    orderId:'002111001',
                    amount:'2500',
                    createTime:'2018-11-01 17:20:25',
                    orderItemList:[
                        {
                            id:'112',
                            content:'续费一年',
                            quantity:'1',
                            money:'1000',
                        },
                        {   id:'114',
                            content:'购买10个账号',
                            quantity:'1',
                            money:'1500',
                        }
                    ],
                },{
                    orderId:'002111002',
                    amount:'1000',
                    createTime:'2018-11-01 17:10:25',
                    orderItemList:[
                        {
                            id:'111',
                            content:'续费一年',
                            quantity:'1',
                            money:'1000',
                        }
                    ],
                }],
            }
        }
    }
</script>
<style scoped>
    table{
        margin-top: 15px;
        width: 100%;
        border:1px solid #e9eaec;
        border-collapse:collapse
    }
    th{
        background-color: #f8f8f9;
    }
    th,td{
        padding: 5px;
        border: 1px solid #e9eaec;
        text-align: center;
        vertical-align: top;
        line-height: 30px;
    }
</style>

作者：水君子Z
链接：https://www.jianshu.com/p/163db9107bf0
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。