element-ui 点击某列的一个元素展开当前行

 

页面效果我希望点击展开看到下面的内容。下面的内容并不在table里面。而是从新访问接口获取的。

table的格式可以使用table外的内容的，所以不用把它展开的内容push进table的变量里面。

<template>
    <el-table ref="table" border stripe highlight-current-row :data="list" style="width: 800px;">
        <el-table-column label="商品 ID" prop="id" width="100">
        </el-table-column>
        <el-table-column label="商品名称" prop="name">
        </el-table-column>

        <el-table-column label="操作" width="100">
            <template slot-scope="{row,$index}">
                <el-button type="text" @click="