須要實現以下效果
通常ERP中,訂單數據都分爲彙總信息與明細信息,而後在查詢的時候一次性從後臺查詢多條訂單json數據,並將彙總信息展現到表格中。可是明細信息也是用戶須要關注的,好比用戶可能會想知道某個訂單裏面具體包含哪些商品,下單數量分別是多少。這時候就須要可以點擊具體彙總信息行數據的時候,在下方展現出對應的明細數據。 javascript
實現要點
一、主表格綁定 @expand-change 事件
<el-table v-loading="loading" :data="data" size="small" border style="width: 100%;" @expand-change="rowExpand">
二、增長展開列,並在展開列中再加一個table(做爲子表)
<el-table-column type="expand" prop=""> <template slot-scope=""> <el-table :data="orderDetailData"> <el-table-column label="訂單編號" prop="orderId"/> <el-table-column label="商品名稱" prop="skuName"/> <el-table-column label="購買數量" prop="purchaseNum"/> <el-table-column label="價格" prop="skuPrice"/> <el-table-column label="商品編碼" prop="venderSku"/> <el-table-column label="單品優惠" prop="discount"/> </el-table> </template> </el-table-column>
三、methods中增長rowExpand方法具體實現
rowExpand(row, expandeRows) { console.log('點開了' + row.orderId) console.log(row.orderDetails) const _this = this _this.orderDetailData = row.orderDetails }
完整代碼以下
<template> <div class="app-container"> <eHeader :query="query"/> <!--表格渲染--> <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;" @expand-change="rowExpand"> <el-table-column type="expand" prop=""> <template slot-scope=""> <el-table :data="orderDetailData"> <el-table-column label="訂單編號" prop="orderId"/> <el-table-column label="商品名稱" prop="skuName"/> <el-table-column label="購買數量" prop="purchaseNum"/> <el-table-column label="價格" prop="skuPrice"/> <el-table-column label="商品編碼" prop="venderSku"/> <el-table-column label="單品優惠" prop="discount"/> </el-table> </template> </el-table-column> <el-table-column prop="orderId" label="訂單編號" align="left" width="120"/> <el-table-column prop="venderId" label="商家ID" /> <el-table-column prop="orderTime" label="訂單時間" min-width="140"/> <el-table-column prop="venderCode" label="客戶編碼" width="100"/> <el-table-column prop="payType" label="付款方式"/> <el-table-column prop="totalMoney" label="總金額"/> <el-table-column prop="discount" label="優惠金額"/> <el-table-column prop="payMoney" label="支付金額"/> <el-table-column prop="companyName" label="買家公司名稱" width="120"/> <el-table-column prop="pickName" label="收貨人"/> <el-table-column prop="pickAddress" label="收貨地址" width="200"/> <el-table-column prop="pickPhone" label="收貨人電話" width="100"/> <el-table-column prop="orderState" label="訂單狀態"/> <el-table-column prop="orderState" label="平臺優惠"/> <el-table-column prop="remark" label="備註"/> <el-table-column prop="freight" label="運費" width="60"/> <el-table-column label="操做" width="150px" align="center"> <template slot-scope="scope"> <!-- <el-button slot="reference" type="primary" size="mini" @click="showDetail">訂單詳情</el-button> --> <edit v-if="checkPermission(['ADMIN'])" :data="scope.row" :sup_this="sup_this"/> <el-popover v-if="checkPermission(['ADMIN'])" :ref="scope.row.orderId" placement="top" width="180"> <p>肯定刪除本條數據嗎?</p> <div style="text-align: right; margin: 0"> <el-button size="mini" type="text" @click="$refs[scope.row.orderId].doClose()">取消</el-button> <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.orderId)">肯定</el-button> </div> <el-button slot="reference" type="danger" size="mini">刪除</el-button> </el-popover> </template> </el-table-column> </el-table> <!--分頁組件--> <el-pagination :total="total" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange"/> </div> </template> <script> import checkPermission from '@/utils/permission' import initData from '@/mixins/initData' import { parseTime } from '@/utils/index' import eHeader from './module/header' import { del } from '@/api/ordersMan' import edit from './module/edit' export default { components: { eHeader, edit }, mixins: [initData], data() { return { // delLoading: false, sup_this: this, orderDetailData: [{ orderId: '11111', skuName: 'ddddddd' }, { orderId: '22222', skuName: 'ffffffff' }] delLoading: false, sup_this: this, orderDetailData: null } }, created() { this.$nextTick(() => { this.init() }) }, methods: { parseTime, checkPermission, beforeInit() { this.url = 'api/orders' const sort = 'orderId,desc' this.params = { page: this.page, size: this.size, sort: sort } const query = this.query const type = query.type const value = query.value if (type && value) { this.params[type] = value } return true }, subDelete(orderId) { this.delLoading = true del(orderId).then(res => { this.delLoading = false this.$refs[orderId].doClose() this.init() this.$notify({ title: '刪除成功', type: 'success', duration: 2500 }) }).catch(err => { this.delLoading = false this.$refs[orderId].doClose() console.log(err.response.data.message) }) }, rowExpand(row, expandeRows) { console.log('點開了' + row.orderId) console.log(row.orderDetails) const _this = this _this.orderDetailData = row.orderDetails } } } </script> <style scoped> .demo-table-expand { font-size: 0; } .demo-table-expand label { width: 90px; color: #99a9bf; } .demo-table-expand .el-form-item { margin-right: 0; margin-bottom: 0; width: 50%; } </style>
坑
其實不能算作坑,只是本身對於VUE不熟悉本身坑了本身java
data() { return { // delLoading: false, sup_this: this, orderDetailData: [{ orderId: '11111', skuName: 'ddddddd' }, { orderId: '22222', skuName: 'ffffffff' }] delLoading: false, sup_this: this, orderDetailData: null } },
data中須要給orderDetailData給個null值,那麼後面的rowExpand方法中再給_this.orderDetailData 賦值界面上的數據纔會從新渲染。這個問題在官方文檔中有說明: json