表格中type=expend事件，展开行功能

代码如下：

<template>

  <el-table

    @expand-change="getDetailList"    

    :data="tableData"

    style="width: 30%">

    <el-table-column type="expand">

      <template slot-scope="props">

         <el-table

          :data="detailData"

          border

          stripe

          style="width: 50%">

        <el-table-column

         type="index"

          label="序号"

          width="180">

        el-table-column>

        <el-table-column

          prop="name"

          label="姓名"

        >

        el-table-column>

        <el-table-column

          prop="address"

          label="地址">

        el-table-column>

         <el-table-column

          prop="name"

          label="别名"

         >

        el-table-column>

        <el-table-column

          prop="age"

          label="年龄">

        el-table-column>

      el-table>

      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 {

        detailData:[{

          name:'测试',

          age:'19'

        }], // 详情数据

        tableData: [{

          id: '12987122',

          name: '好滋好味鸡蛋仔',

          category: '江浙小吃、小吃零食',

          desc: '荷兰优质淡奶，奶香浓而不腻',

          address: '上海市普陀区真北路',

          shop: '王小虎夫妻店',

          shopId: '10333'

        }, {

          id: '12987123',

          name: '好滋好味鸡蛋仔',

          category: '江浙小吃、小吃零食',

          desc: '荷兰优质淡奶，奶香浓而不腻',

          address: '上海市普陀区真北路',

          shop: '王小虎夫妻店',

          shopId: '10333'

        }]

      }

    },

    methods:{

      // 图标展开事件

      getDetailList(row , expandedRows){

        // expandedRows 参数，如果长度为0，代表闭合状态，不进行事件请求操作

        if(expandedRows.length===0) return console.log("闭合状态")

        // row 是拿到当前行的所有信息，可以直接赋值，也可以通过请求接口来获取其它信息

         console.log("展开状态" , row)

      }

    }

  }

script>