<template>
<div>
<el-table
:data="parentTable"
:row-key="getRowKeys"
:expand-row-keys="expands"
style="width: 100%">
<el-table-column type="expand">
<template scope="scope">
<el-table class="demo-table-expand" :data="scope.row.tableData3"
height="300"
border
style="width: 100%">
<el-table-column type="expand">
<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-column label="编号">
<template scope="props">
<span>{{props.row.name}}</span>
</template>
</el-table-column>
<el-table-column label="房间号">
<template scope="props">
<span>{{props.row.name}}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="房型">
</el-table-column>
<el-table-column
prop="date"
label="性别"
>
</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="date"
label="备注"
>
</el-table-column>
<el-table-column align="center" label="操作" width="150">
<template scope="scope">
<el-button size="small" type="success" @click="handleUpdate(scope.row)">修改
</el-button>
<el-button size="small" type="danger" @click="sure">删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column align="center"
label="楼宇"
prop="names">
</el-table-column>
<el-table-column align="center"
label="描述"
prop="desc">
</el-table-column>
<el-table-column align="center" label="操作" width="150">
<template scope="scope">
<el-button size="small" type="success" @click="handleUpdate(scope.row)">修改
</el-button>
<el-button size="small" type="danger" @click="sure">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'inline_edit-table_demo',
data() {
return {
tableData5: [{
names: 'S1-科技楼',
desc: '公司楼',
tableData3: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}, {
names: 'S2-科技楼',
desc: '上课喽',
tableData3: [{
date: '2016-05-03',
name: '张小虎',
address: '上海市普陀区金沙江路 32421弄'
}]
}]
}
}
}
</script>
效果图：
