一、代码实现：
@row-click="handleRowClick"给表格绑定一个点击事件，该行被单击时，触发该事件- 遍历从后台获取的
tableData,给它的每一个item加上一个控制该行展开与否的标志expanded - 在刚刚绑定的点击事件中，调用表格的
toggleRowExpansion(row, expanded)方法，第一个参数是点击的那行的数据，第二个参数是展开与否 （为true时展开，为false则收起）
<template>
<el-table
:data="tableData"
style="width: 100%"
ref="expandTable"
@row-click="handleRowClick"
>
<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.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>
<script>
export default {
data() {
return {
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"
}
]
};
},
mounted() {
// tableData是从后台获取，则这个遍历就放在获取tableData那个地方
this.tableData.forEach(val => {
this.$set(val, "expanded", false);
});
},
methods: {
handleRowClick(row) {
row.expanded = !row.expanded;
this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
}
}
};
</script>
<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>
二、易犯的错误
这里以上面的代码为例，将js部分单独提出来，举一个常犯的错误
<script>
export default {
data() {
return {
tableData: [
{
id: "12987122",
name: "好滋好味鸡蛋仔",
category: "江浙小吃、小吃零食",
desc: "荷兰优质淡奶，奶香浓而不腻",
address: "上海市普陀区真北路",
shop: "王小虎夫妻店",
shopId: "10333"
},
{
id: "12987123",
name: "好滋好味鸡蛋仔",
category: "江浙小吃、小吃零食",
desc: "荷兰优质淡奶，奶香浓而不腻",
address: "上海市普陀区真北路",
shop: "王小虎夫妻店",
shopId: "10333"
}
]
expanded: false // 在这里定义了展开与否的标志
};
},
methods: {
handleRowClick(row) {
this.expanded = !this.expanded; // 这里也更改了它的值
this.$refs.expandTable.toggleRowExpansion(row, this.expanded);
}
}
};
</script>
乍一看没什么毛病，但这个代码确实 就存在一个问题：
比如，我展开了第一行，但我没把第一行收起来，这时候去点第二行，就需要多点一下，哇哦，惊不惊喜。
因为此时，所有行都是用的同一个变量，并没有做明确的定位。
