首先，官方出示的案例：
template El-table 3360 data=' tabledata ' style=' width :100 % ' El-table-columntype=' expand ' templates lot-sc cc demo-table-expand ' El-form-item label='商品名' span { { props.row.name } }/span/El-form-item El-form-item-item El-form-itemEl-form-item级别} El-form-itemEl-form-item级别='商店id ' span { { props.row.shopid }/span El-form-itemEl-form-item级别='商店地址' span { { props.row.address } }/span/El-form-item El-form-item级别El-table-column El-table-column label='商品id ' prop=' id '/El-table-cable-column El-table-column El-table El-table/template style.demo }.demo-table-expand label { width :90 px； color: #99a9bf； }.demo-table-expand.El-form-item { margin-right 3360； 边距-底部： 0； width: 50%； (/stylescriptexportdefault(data ) ) return ) Tabledata: ) id: ) 12987122 )、name: )美味蛋仔)、category: 奶香浓而不腻(，address: )上海市普陀区真北路)、shop: )王小虎夫妻店)、shopid:(103333 )、{ id : } 12987123 } category 333660 奶香不腻”，address:“上海市普陀区真北路”，shop:“王小虎夫妇店”，shopid3360「10360”
12987125', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987126', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }] } } }</script>
我们按照步骤来，根据文档查阅内涵row-key、@row-click、expand-row-keys
那么我们代码只需要在el-table标签属性中新增：
row-key="id" @row-click="rowClick" :expand-row-keys="expands"id是我们的数据id，rowClick则是一个函数 expands则对应一个数组
如果表格中内涵@click这类事件，需要新增.stop.prevent 事件冒泡
接下来编写数组删除组件utils/arr.js;
// 数组原型上扩展删除方法Array.prototype.remove = function (val) { let index = this.indexOf(val); if (index > -1) { this.splice(index, 1); }};引入我们的数组删除
import "@/utils/arr";
在date中新增：
data() { return { ... expands: [] //要展开的行，数组的元素是row的key值 ... }}最后只需要编写点击的table函数即可
// table 单行点击，展开详情 rowClick(row, event, colum) { if (this.expands.indexOf(row.id) < 0) { this.expands = []; this.expands.push(row.id); } else { this.expands.remove(row.id); } },
主要的文件源码只有2个
arr.js与table.vue
table.vue源码：
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="expand" row-key="id" @row-click="rowClick" :expand-row-keys="expands"> <template slot-scope="props"> <el-form label-position="left" inline class="demo-table-expand"> <el-form-item label="商品名称"> <span>{{ props.row.name }}</span> </el-form-item> <el-form-item label="所属店铺"> <span>{{ props.row.shop }}</span> </el-form-item> <el-form-item label="商品 ID"> <span>{{ props.row.id }}</span> </el-form-item> <el-form-item label="店铺 ID"> <span>{{ props.row.shopId }}</span> </el-form-item> <el-form-item label="商品分类"> <span>{{ props.row.category }}</span> </el-form-item> <el-form-item label="店铺地址"> <span>{{ props.row.address }}</span> </el-form-item> <el-form-item label="商品描述"> <span>{{ props.row.desc }}</span> </el-form-item> </el-form> </template> </el-table-column> <el-table-column label="商品 ID" prop="id"> </el-table-column> <el-table-column label="商品名称" prop="name"> </el-table-column> <el-table-column label="描述" prop="desc"> </el-table-column> </el-table></template><style> .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><script>import "@/utils/arr";//引入我们的数组 export default { data() { return { expands: [], //要展开的行，数组的元素是row的key值 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: { // table 单行点击，展开详情 rowClick(row, event, colum) { if (this.expands.indexOf(row.id) < 0) { this.expands = []; this.expands.push(row.id); } else { this.expands.remove(row.id); } },} }</script>