One, code implementation:

  1. @row-click=”handleRowClick” binds a click event to the table that is triggered when the row is clicked
  2. Iterate over the tableData fetched from the background, adding a flag called Expanded to each item that controls whether the row is expanded or not
  3. In the click event you just bound, the table’stoggleRowExpansion(row, expanded)Method, the first argument is the data for the row clicked, and the second argument is whether to expand (istrueIs expanded, and isfalseTuck up)
<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="Trade Name">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="Store">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="Product ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="The store ID">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="Commodity Classification">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="Store Address">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="Product Description">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="Product ID" prop="id"> </el-table-column>
    <el-table-column label="Trade Name" prop="name"> </el-table-column>
    <el-table-column label="Description" prop="desc"> </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{id: "12987122".name: "Delicious eggs".category: "Jiangsu and Zhejiang Snacks, snacks snacks".desc: "High-quality evaporated milk from the Netherlands, creamy but not greasy.".address: Zhenbei Road, Putuo District, Shanghai.shop: "Wang Xiaohu Mom-and-pop Shop".shopId: "10333"
        },
        {
          id: "12987123".name: "Delicious eggs".category: "Jiangsu and Zhejiang Snacks, snacks snacks".desc: "High-quality evaporated milk from the Netherlands, creamy but not greasy.".address: Zhenbei Road, Putuo District, Shanghai.shop: "Wang Xiaohu Mom-and-pop Shop".shopId: "10333"
        },
        {
          id: "12987125".name: "Delicious eggs".category: "Jiangsu and Zhejiang Snacks, snacks snacks".desc: "High-quality evaporated milk from the Netherlands, creamy but not greasy.".address: Zhenbei Road, Putuo District, Shanghai.shop: "Wang Xiaohu Mom-and-pop Shop".shopId: "10333"
        },
        {
          id: "12987126".name: "Delicious eggs".category: "Jiangsu and Zhejiang Snacks, snacks snacks".desc: "High-quality evaporated milk from the Netherlands, creamy but not greasy.".address: Zhenbei Road, Putuo District, Shanghai.shop: "Wang Xiaohu Mom-and-pop Shop".shopId: "10333"}}; },mounted() {
    // tableData is fetched from the background, so the traversal is placed in the same place that tableData is fetched
    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>
Copy the code

Easy mistakes

Here, as an example of the above code, the JS part is taken out separately to cite a common mistake

<script>
export default {
  data() {
    return {
      tableData: [{id: "12987122".name: "Delicious eggs".category: "Jiangsu and Zhejiang Snacks, snacks snacks".desc: "High-quality evaporated milk from the Netherlands, creamy but not greasy.".address: Zhenbei Road, Putuo District, Shanghai.shop: "Wang Xiaohu Mom-and-pop Shop".shopId: "10333"
        },
        {
          id: "12987123".name: "Delicious eggs".category: "Jiangsu and Zhejiang Snacks, snacks snacks".desc: "High-quality evaporated milk from the Netherlands, creamy but not greasy.".address: Zhenbei Road, Putuo District, Shanghai.shop: "Wang Xiaohu Mom-and-pop Shop".shopId: "10333"}]expanded: false  // The expansion flag is defined here
    };
  },
  methods: {
    handleRowClick(row) {
       this.expanded = !this.expanded;  // Change its value here too
      this.$refs.expandTable.toggleRowExpansion(row, this.expanded); }}}; </script>Copy the code

At first glance, there is nothing wrong with this code, but there is one problem:

For example, if I expand the first row, but I don’t close the first row, and I click on the second row, I have to do a little bit more, wow, surprise.

Because at this point, all the rows are using the same variable, and there’s no explicit positioning.