实现element-ui中 table 点击一行展开

参考网址：

　　​​https://www.jianshu.com/p/c064db86c559?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation​​

实现思路:

　　1. table 添加  ref="refTable" 引用 该table

　　2. table 添加  @row-click="clickTable" 点击事件

　　3. 点击时,调用table的方法 toggleRowExpansion ,展开/关闭

　　参考API :  https://element.eleme.cn/#/zh-CN/component/table
　　

clickTable(row,index,e){
 
    //调用,table的方法,展开/折叠 行
    this.$refs.refTable.toggleRowExpansion(row)
}

 此处贴的是别人的代码:

1 <template>
  2   <el-table
  3     :data="tableData5"
  4   @row-click="clickTable"
  5    ref="refTable"
  6     style="width: 100%">
  7     <el-table-column type="expand">
  8       <template slot-scope="props">
  9         <el-form label-position="left" inline class="demo-table-expand">
 10           <el-form-item label="商品名称">
 11             <span>{{ props.row.name }}</span>
 12           </el-form-item>
 13           <el-form-item label="所属店铺">
 14             <span>{{ props.row.shop }}</span>
 15           </el-form-item>
 16           <el-form-item label="商品 ID">
 17             <span>{{ props.row.id }}</span>
 18           </el-form-item>
 19           <el-form-item label="店铺 ID">
 20             <span>{{ props.row.shopId }}</span>
 21           </el-form-item>
 22           <el-form-item label="商品分类">
 23             <span>{{ props.row.category }}</span>
 24           </el-form-item>
 25           <el-form-item label="店铺地址">
 26             <span>{{ props.row.address }}</span>
 27           </el-form-item>
 28           <el-form-item label="商品描述">
 29             <span>{{ props.row.desc }}</span>
 30           </el-form-item>
 31         </el-form>
 32       </template>
 33     </el-table-column>
 34     <el-table-column
 35       label="商品 ID"
 36       prop="id">
 37     </el-table-column>
 38     <el-table-column
 39       label="商品名称"
 40       prop="name">
 41     </el-table-column>
 42     <el-table-column
 43       label="描述"
 44       prop="desc">
 45     </el-table-column>
 46   </el-table>
 47 </template>
 48  
 49 <style>
 50   .demo-table-expand {
 51     font-size: 0;
 52   }
 53   .demo-table-expand label {
 54     width: 90px;
 55     color: #99a9bf;
 56   }
 57   .demo-table-expand .el-form-item {
 58     margin-right: 0;
 59     margin-bottom: 0;
 60     width: 50%;
 61   }
 62 </style>
 63  
 64 <script>
 65   export default {
 66     data() {
 67       return {
 68         tableData5: [{
 69           id: '12987122',
 70           name: '好滋好味鸡蛋仔',
 71           category: '江浙小吃、小吃零食',
 72           desc: '荷兰优质淡奶，奶香浓而不腻',
 73           address: '上海市普陀区真北路',
 74           shop: '王小虎夫妻店',
 75           shopId: '10333'
 76         }, {
 77           id: '12987123',
 78           name: '好滋好味鸡蛋仔',
 79           category: '江浙小吃、小吃零食',
 80           desc: '荷兰优质淡奶，奶香浓而不腻',
 81           address: '上海市普陀区真北路',
 82           shop: '王小虎夫妻店',
 83           shopId: '10333'
 84         }, {
 85           id: '12987125',
 86           name: '好滋好味鸡蛋仔',
 87           category: '江浙小吃、小吃零食',
 88           desc: '荷兰优质淡奶，奶香浓而不腻',
 89           address: '上海市普陀区真北路',
 90           shop: '王小虎夫妻店',
 91           shopId: '10333'
 92         }, {
 93           id: '12987126',
 94           name: '好滋好味鸡蛋仔',
 95           category: '江浙小吃、小吃零食',
 96           desc: '荷兰优质淡奶，奶香浓而不腻',
 97           address: '上海市普陀区真北路',
 98           shop: '王小虎夫妻店',
 99           shopId: '10333'
100         }]
101       }
102     },
103      methods: {
104          clickTable(row,index,e){
105            this.$refs.refTable.toggleRowExpansion(row)
106       }
107   }
108