<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="描述" prop="desc"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData5: [{ 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' }], // 獲取row的key值 getRowKeys(row) { return row.id; }, // 要展開的行,數值的元素是row的key值 expands: [] } }, mounted() { // 在這里你想初始化的時候展開哪一行都可以了 this.expands.push(this.tableData5[1].id); } } </script> <style lang="css"> .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>