element 表格一组数据两行展示

奈何桥上哈啤酒

已于 2023-04-10 14:59:03 修改

阅读量1.9k

点赞数 4

文章标签： vue.js elementui javascript

于 2023-02-22 17:49:09 首次发布

本文链接：https://blog.csdn.net/Yangpengxunb/article/details/129167420

版权

需求：

代码：

<!-- 表格 -->
        <div class="jp_order_table">
            <el-table :data="tableData" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
                <el-table-column prop="q,w,e,r,t" label="订单信息" key="1" width="500">
                    <template slot-scope="{row}">
                        <el-row class="jp_table_row01">
                            <el-col :span="12">
                                <span class="orderNum">订单编号：{{ row.q }} </span> 
                            </el-col>
                            <el-col :span="12">
                                <span>时间：{{ row.w }}</span>
                            </el-col>
                        </el-row>
                        <el-row class="jp_table_row002 ">
                            <el-col :span="5">
                                <el-image style="width: 70px;height: 70px;border: 1px solid #E4E4E4;" :src="row.e" fit="cover"></el-image>
                            </el-col>
                            <el-col :span="15">
                                <span class="jp_marginTop25">{{ row.r }}</span>
                            </el-col>
                            <el-col :span="4">
                                <span class="jp_marginTop25">{{ row.t }}</span>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column prop="y" label="收货人" key="2">
                    <template slot-scope="{row}">
                        <el-row class="jp_table_row01">
                        </el-row>
                        <el-row class="jp_table_row02 jp_paddingTop25">
                            <el-col :span="24">
                                <span class="jp_marginTop25">{{ row.y }}</span>
                                <div>陈楠</div>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column prop="u" label="发货人" key="3">
                    <template slot-scope="{row}">
                        <el-row class="jp_table_row01">
                        </el-row>
                        <el-row class="jp_table_row02">
                            <el-col :span="24">
                                <span class="jp_marginTop25">{{ row.u }}</span>
                                <div>张三</div>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column prop="i" label="金额" width="170" key="4">
                    <template slot-scope="{row}">
                        <el-row class="jp_table_row01">
                        </el-row>
                        <el-row class="jp_table_row02">
                            <el-col :span="24">
                                <span class="jp_marginTop25">{{ row.i }}</span>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column prop="o" label="全部状态" key="5">
                    <template slot-scope="{row}">
                        <el-row class="jp_table_row01">
                        </el-row>
                        <el-row class="jp_table_row02">
                            <el-col :span="24">
                                <span class="jp_marginTop25" style="color:#FF8F1F;">{{ row.o }}</span>
                                <div>订单详情</div>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="操作" key="6">
                    <template slot-scope="{row}">
                        <el-row class="jp_table_row01">
                        </el-row>
                        <el-row class="jp_table_row02">
                            <el-col :span="24">
                                <el-button type="text" size="medium" @click="add(row.id)" style="color: #0061A4;" class="jp_marginTop25">发货</el-button>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </div>

css：

.jp_order_table .jp_table_row01{height: 47px;line-height: 47px;}
.jp_order_table .jp_table_row02{height: 100px;border-top: 1px solid #E9E9E9;border-right: 1px solid #E9E9E9;border-bottom: 1px solid #E9E9E9;}
.jp_order_table .jp_table_row002{height: 100px;border: 1px solid #E9E9E9;}
.jp_order_table .el-table__row td{border-bottom: none !important;padding: 0 !important;}
.jp_order_table .el-table__row td .cell{padding: 0 !important;}