element ui table（表格）实现点击一行展开功能

<template> <el-table   :data="tableData5"   style="width: 100%"   row-key="id"   :expand-row-keys="expands"   @row-click="rowClick">  <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> <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> export default {  data() {   return {    tableData5: [{     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'    }],      // 要展开的行，数值的元素是row的key值    expands: []   }  },  methods:{   //在<table>里，我们已经设置row的key值设置为每行数据id：row-key="id"   rowClick(row, event, column) {    Array.prototype.remove = function (val) {     let index = this.indexOf(val);     if (index > -1) {      this.splice(index, 1);     }    };     if (this.expands.indexOf(row.id) < 0) {     this.expands.push(row.id);    } else {     this.expands.remove(row.id);    }    }  }  }</script>

row-key="id":expand-row-keys="expands"@row-click="rowClick"

if (this.expands.indexOf(row.id) < 0) {     this.expands = []     this.expands.push(row.id);    } else {     this.expands.remove(row.id);    }