SOURCE

new Vue({
    el: '#app',
    data() {
		return {
            tableData: [{
            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'
            }],
            // 展开数据
			expands: []
		}
    },
    methods: {
        // 展开数据
        expandRow(row) {
            if (this.expands.indexOf(row.id) < 0) {
                // 如果当前没有该扩展列，expands添加该列，扩展
                this.expands = []
                this.expands.push(row.id)
                // this.getOneTableDetail(row)
            } else {
            // 如果当前已经有该扩展列，expands清空，收回
                this.expands = []
            }
        }
    }
})

<div id="app">
  <el-table
    :data="tableData"
    row-key="id"
    :expand-row-keys="expands"
    style="width: 100%">
    <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-column prop="requestParams" align="center" width="70" label="详情">
        <template slot-scope="scope">
            <el-button
                size="mini"
                type="text"
                @click="expandRow(scope.row)"
            >
            <template v-if="expands[0] == scope.row.id">
                收起<i class="el-icon-caret-bottom el-icon--right" />
            </template>
            <template v-else>
                展开<i class="el-icon-caret-right el-icon--right" />
            </template>
            </el-button>
        </template>
    </el-table-column>
    <!-- 详情展开列，设置宽度为1 -->
    <el-table-column type="expand" width="1">
      <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>
</div>