vue+element-ui实现主子表_elementui 展示主子表 如何优雅实现 先展示主表信息 子表信息 异步展示

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

需要实现如下效果

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

实现要点

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

2、增加展开列，并在展开列中再加一个table（作为子表）

3、methods中增加rowExpand方法具体实现

 rowExpand(row, expandeRows) { console.log(\'点开了\' + row.orderId) console.log(row.orderDetails) const _this = this _this.orderDetailData = row.orderDetails }

完整代码如下

 
                                  <!-- 订单详情 -->   
确定删除本条数据吗？
 
  取消  确定 
 删除       
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 } }} .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%; }

坑

其实不能算做坑，只是自己对于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 赋值界面上的数据才会重新渲染。这个问题在官方文档中有说明：