1、效果图

在这里插入图片描述

2、代码

<template>
<el-table :data="tableData" style="width: 100%"  @expand-change="expandChange"><el-table-column type="expand"><template slot-scope="props"><el-form label-position="left" inline class="demo-table-expand"><el-form-item label="商品名称"><span>{{ props.row.lazy.name }}</span></el-form-item><el-form-item label="所属店铺"><span>{{ props.row.lazy.shop }}</span></el-form-item><el-form-item label="商品 ID"><span>{{ props.row.lazy.id }}</span></el-form-item><el-form-item label="店铺 ID"><span>{{ props.row.lazy.shopId }}</span></el-form-item><el-form-item label="商品分类"><span>{{ props.row.lazy.category }}</span></el-form-item><el-form-item label="店铺地址"><span>{{ props.row.lazy.address }}</span></el-form-item><el-form-item label="商品描述"><span>{{ props.row.lazy.desc }}</span></el-form-item></el-form></template></el-table-column><el-table-columnlabel="商品 ID"prop="id"></el-table-column><el-table-columnlabel="商品名称"prop="name"></el-table-column><el-table-columnlabel="描述"prop="desc"></el-table-column></el-table></template><script>export default {data() {return {lazy:{id: '12987122',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'},tableData: [{id: '12987122',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}, {id: '12987123',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}, {id: '12987125',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}, {id: '12987126',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}]},methods: {/*** 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）* @param {*} row*/expandChange(row, expandedRows) {// 判断当前行 属性 'lazy' 是否 等于 undefined, 等于 undefined 就请求后端加载数据  才加载日志数据if (row.lazy=== undefined) {// 这里就可以请求后端数据了，我这边直接用固定数据赋值row. Lazy = this.lazy// 改变数据，并不会立马刷新，需要 手动改变一下 页面事件，随便一个事件都可以，这边使用的是 高亮当前行this.$refs.table.setCurrentRow(row)}}}}}
</script>