<template lang="html"> <el-table :data="tableData5" :row-key="getRowKeys" :expand-row-keys="expands" style="width: 100%"> <el-table-column type="expand"> <template 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=""Description prop = " desc" > </ EL-Table-column> </ EL-Table> </ Template> <Script> Export default { Data () { return { tableData5: [{ ID: ' 12,987,122 ' , name: ' Good Zi good taste eggs Aberdeen ' , category: ' Jiangsu and Zhejiang snacks, tapas snacks ' , desc: ' Netherlands evaporated milk quality, milk fragrant but not greasy ' , address: ' Shanghai Putuo District true North' , Shop: ' Xiaohu mom and pop ' , shopId: ' 10333 ' }, { the above mentioned id: ' 12,987,123 ' , name: ' Good Zi good taste Egg ' , category: ' Jiangsu and Zhejiang snacks, tapas snacks ' , desc: ' Dutch high-quality light milk, milk fragrant but not greasy ' , address: ' Shanghai Putuo District true North ' , Shop: ' Xiaohu mom and pop ' , shopId: ' 10333 ' }, { The above mentioned id: ' 12,987,125 ' , name: ' Good Egg mayonnaise good taste ' , category: ' Jiangsu and Zhejiang snacks, tapas snacks ' , desc: ' Netherlands evaporated milk quality, milk fragrant but not greasy ' , address: ' Shanghai Putuo District true North ' , Shop: ' Xiaohu mom and pop ' , shopId: ' 10333 ' }, { the above mentioned id: ' 12,987,126 ' , name: ' Good Egg mayonnaise good taste ' , category: ' Jiangsu and Zhejiang snacks, tapas snacks ' , desc: ' Netherlands evaporated milk quality, milk fragrant but not greasy ' , address: ' Shanghai Putuo District true North ' , Shop: ' Xiaohu mom and pop ' , shopId: ' 10333 ' }], // Get row key value getRowKeys (row) { return row.id; }, // to expand the line, the value of the element row key value Expands: [] } }, Mounted () { // Here you want to expand the initialization of the row which may be the the this .expands.push ( the this .tableData5 [ . 1 ] .id); } } </ Script> <style lang = " CSS " > . Demo -table- the expand { font -size: 0 ; } .demo -table- the expand label { width: 90px; Color: # 99a9bf; } .demo -table-.el the expand-form- Item { margin -right: 0 ; margin - bottom: 0 ; width:50%; } </style>