table 超级详细的商品订单列表

效果图如下

<template><el-table :data="tableData"striperow-key="id"><el-table-column type="selection"width="55"></el-table-column><!-- 内层table --><el-table-column type="expand"><template slot-scope="props"><el-table :data="props.row.child"class="in_tab"striperow-key="id"><el-table-column align="right"width="80"></el-table-column><el-table-column prop="address"align="right"min-width="160"label="销售价"><template slot-scope="scope"><div class="mesSty"><img class="imgSty"src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607508642445&di=0e36873f5842d9a862bf9f8f2da19510&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Ff3d3572c11dfa9ecc052be8060d0f703918fc12d.jpg"alt=""><div class="mesFont"><p class="pb_sty"style="text-align:left"><span>{{scope.row.name}}</span></p><p>荷兰艾优APIYOO电动牙阿啊阿啊荷兰艾优APIYOO电动牙阿啊阿啊荷兰艾优APIYOO电动牙阿啊阿啊 啊</p><p style="text-align:left">蓝色：10*5cm</p></div></div></template></el-table-column><el-table-column prop="address"align="right"width="100"label="销售价"></el-table-column><el-table-column prop="address"align="center"label="数量"></el-table-column><el-table-column prop="address"align="center"label="订单状态"></el-table-column><el-table-column align="center"label="支付方式"><template slot-scope=""><span>微信</span><span>(100积分)</span></template></el-table-column><el-table-column prop="address"align="center"label="结算状态"></el-table-column><el-table-column prop="address"align="center"label="账单状态"></el-table-column><el-table-column prop="address"align="center"label="开票状态"></el-table-column><el-table-column align="right"label="订单总金额"><template slot-scope="scope"><span style="color:#FF2424">{{scope.row.address}}元</span></template></el-table-column></el-table></template></el-table-column><el-table-column label="商品信息"width="300"class="box"><template slot-scope="scope"><div class="mesSty"><img class="imgSty"src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607508642445&di=0e36873f5842d9a862bf9f8f2da19510&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Ff3d3572c11dfa9ecc052be8060d0f703918fc12d.jpg"alt=""><div class="mesFont"><p class="pb_sty"><span>{{scope.row.name}}</span></p><p>荷兰艾优APIYOO电动牙阿啊阿啊荷兰艾优APIYOO电动牙阿啊阿啊荷兰艾优APIYOO电动牙阿啊阿啊 啊</p><p>蓝色：10*5cm</p></div></div><!-- 提示 --><div class="item"><span style="margin-left:1%">订单编号：678346587485 <span>共<span style="color:#409EFF">10</span>件</span></span><span class="hint_pr">下单人信息：小丸子 12786934367</span><span class="hint_pr">下单时间：2020-03-03 20:23:23</span><span class="hint_pr"style="color:#FF2424">售后中</span><el-popover placement="top"class="hint_pr"width="220"trigger="hover"content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"><span slot="reference"style="color:#F23645">买家备注 <i class="el-icon-tickets"></i></span></el-popover><el-popover placement="top"class="hint_pr"width="200"trigger="hover"><div v-if="popSty"class="popH"><el-input type="textarea":rows="2"placeholder="请输入内容"v-model="textarea"></el-input><div style="text-align: right; margin: 0"><el-button size="mini"type="text"@click="popClear">取消</el-button><el-button type="primary"size="mini"@click="popEnd">确定</el-button></div></div><div v-else><p>dasjkdhkjdaks </p><i class="el-icon-edit-outline iconSty"@click="iconBj"></i></div><span slot="reference"style="color:#EBA011">卖家备注 <i class="el-icon-tickets"></i></span></el-popover></div></template></el-table-column><el-table-column prop="address"align="right"min-width="100"label="销售价"></el-table-column><el-table-column prop="address"min-width="140"align="center"label="数量"></el-table-column><el-table-column prop="address"min-width="140"align="center"label="订单状态"></el-table-column><el-table-column min-width="140"align="center"label="支付方式"><template slot-scope=""><span>微信</span><span>(100积分)</span></template></el-table-column><el-table-column prop="address"min-width="140"align="center"label="结算状态"></el-table-column><el-table-column prop="address"min-width="140"align="center"label="账单状态"></el-table-column><el-table-column prop="address"min-width="140"align="center"label="开票状态"></el-table-column><el-table-column min-width="140"align="right"label="订单总金额"><template slot-scope="scope"><span style="color:#FF2424">{{scope.row.address}}元</span></template></el-table-column><el-table-column fixed="right"label="操作"align="center"width="100"><template slot-scope=""><el-button type="text"size="small">订单详情</el-button></template></el-table-column></el-table>
</template><script>
export default {data () {return {popSty: false,textarea: '',tableData: [{ddbh: '', //订单提示信息xx: "",   //订单提示信息time: '', //订单提示信息sh: '',   //订单提示信息mjbz: '', //订单提示信息mjbe: '', //订单提示信息id: 1,date: '2016-05-02',name: '王小虎',address: '12',child: [{id: 1,date: '2016-05-01',name: '王小虎',address: '12',},{id: 2,date: '2016-05-01',name: '王小虎',address: '12',}]},{id: 3,date: '2016-05-01',name: '王小虎',address: '12',child: []}, {id: 4,date: '2016-05-03',name: '王小虎',address: '12',child: []}]}},methods: {iconBj () {this.popSty = true},popClear () {this.popSty = falsethis.textarea = ''},popEnd () {this.popSty = false},}
}
</script><style scoped>
::v-deep .el-table tbody tr:hover > td {background-color: transparent;
}
.el-table--enable-row-transition >>> .el-table__body td {padding-top: 2%;
}
/deep/ .el-table tr {position: relative;width: 100%;
}
/deep/ .cell {padding-top: 3%;
}
.item {width: 115.5em;background: #eee;padding: 1% 0;position: absolute;top: 0;left: -55px;z-index: 1;
}
.in_tab >>> thead {display: none;
}
.in_tab >>> .el-table__body td {padding-top: 1%;
}
</style>
<style  scoped>
.hint_pr {padding-left: 10vh;
}
.imgSty {width: 80px;display: block;
}
.mesSty {display: flex;align-items: center;
}.pb_sty span {background: #1dc8de;padding: 2px 8px;border-radius: 4px;color: #fff;
}.mesFont p {margin-block-start: 0;margin-block-end: 0;
}
.mesFont p:nth-child(2) {text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;
}
.iconSty {float: right;cursor: pointer;
}
.in_tab {margin-top: -2%;
}
</style>

table 超级详细的商品订单列表相关推荐

MySQL分页查询商品订单列表
MySQL分页查询商品订单列表题目简单表设计并且写出sql语句,购物订单系统里面"所有订单"功能,一个订单包含多个产品,一个产品也可能被不同的订单包含,请写出针对于产品名称搜索 ...
淘宝/天猫seller_order_list-获取卖出的商品订单列表接口接入解决方案
一.淘宝/天猫seller_order_list-获取卖出的商品订单列表接口API 返回值说明点击注册获取key和secret测试账号提取淘宝天猫店铺卖家账号买到的订单编号,订单金额,订单详情等, ...
淘宝/天猫获取购买到的商品订单列表
buyer_order_list-获取购买到的商品订单列表前往注册开通测试 onebound.taobao.buyer_order_list 公共参数名称类型必须描述 key String ...
淘宝API接口系列，获取购买到的商品订单列表，订单详情，订单物流，收货地址列表，买家信息，买家token，卖出的商品订单列表
custom自定义API操作 buyer_order_list获取购买到的商品订单列表 buyer_order_detail获取购买到的商品订单详情 buyer_order_express获取购买到的 ...
淘宝API接口系列，获取购买到的商品订单列表，卖出的商品订单列表，订单详情，订单物流，买家信息，收货地址列表，买家token
custom自定义API操作 buyer_order_list获取购买到的商品订单列表 buyer_order_detail获取购买到的商品订单详情 buyer_order_express获取购买到的 ...
淘宝官方订单API接口，获取售出的商品订单列表（爬虫数据）
淘宝/天猫获取售出的商品订单列表 API 返回值说明 seller_order_list-获取售出的商品订单列表公共参数名称类型必须描述 key String 是调用key(必须以GET方 ...
淘宝官方订单 API 接口，获取购买到的商品订单列表
淘宝/天猫获取购买到的商品订单列表 API 返回值说明 buyer_order_list-获取购买到的商品订单列表测试接口公共参数名称类型必须描述 key String 是调用key(必 ...
淘宝/天猫获取卖出的商品订单列表API接口，店铺订单API接口，店铺订单详情API接口
一.淘宝/天猫获取卖出的商品订单列表API接口,店铺订单API接口,店铺订单详情API接口代码如下: 1.公共参数: 名称类型必须描述 key String 是调用key(必须以GET方式拼接 ...
淘宝API获取购买到的商品订单列表
淘宝/天猫获取购买到的商品订单列表 API 返回值说明 buyer_order_list-获取购买到的商品订单列表公共参数请求地址: https://console.open.onebound.c ...

table 超级详细的商品订单列表

table 超级详细的商品订单列表

效果图如下

table 超级详细的商品订单列表相关推荐

最新文章

热门文章

table 超级详细的 商品订单列表

table 超级详细的 商品 订单 列表

效果图如下

table 超级详细的 商品订单列表相关推荐

最新文章

热门文章

table 超级详细的商品订单列表

table 超级详细的商品订单列表

table 超级详细的商品订单列表相关推荐