toggleRowExpansion实现表格的展开和收起功能（Element的table组件，展开行 type=“expand“ ）

一、代码实现：

1. @row-click="handleRowClick" 给表格绑定一个点击事件，该行被单击时，触发该事件
2. 遍历从后台获取的 tableData,给它的每一个item加上一个控制该行展开与否的标志 expanded
3. 在刚刚绑定的点击事件中，调用表格的 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>

乍一看没什么毛病，但这个代码确实 就存在一个问题：

比如，我展开了第一行，但我没把第一行收起来，这时候去点第二行，就需要多点一下，哇哦，惊不惊喜。

因为此时，所有行都是用的同一个变量，并没有做明确的定位。