当前位置：首页 > news >正文

vue+element-ui实现主子表

news 2025/7/27 6:15:23

https://www.cnblogs.com/falcon-fei/p/11060040.html

需要实现如下效果

一般ERP中，订单数据都分为汇总信息与明细信息，然后在查询的时候一次性从后台查询多条订单json数据，并将汇总信息展示到表格中。但是明细信息也是用户需要关注的，比如用户可能会想知道某个订单里面具体包含哪些商品，下单数量分别是多少。这时候就需要能够点击具体汇总信息行数据的时候，在下方展示出对应的明细数据。

VUE主子表效果图

实现要点

1、主表格绑定 @expand-change 事件

<el-table v-loading="loading" :data="data" size="small" border style="width: 100%;" @expand-change="rowExpand">

2、增加展开列，并在展开列中再加一个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>

3、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-popoverv-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.queryconst type = query.typeconst value = query.valueif (type && value) { this.params[type] = value }return true},subDelete(orderId) {this.delLoading = truedel(orderId).then(res => {this.delLoading = falsethis.$refs[orderId].doClose()this.init()this.$notify({title: '删除成功',type: 'success',duration: 2500})}).catch(err => {this.delLoading = falsethis.$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不熟悉自己坑了自己

  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 赋值界面上的数据才会重新渲染。这个问题在官方文档中有说明：

data绑定需要注意的