在Element UI中,可以使用el-table
组件创建折叠格子,当点击主表数据时展开从表细节。以下是一个简单的例子:
<template>
<el-table :data="tableData" style="width: 100%;" row-key="id">
<el-table-column type="expand">
<template slot-scope="props">
<el-table :data="props.row.details" style="width: 100%;">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="主表列1" prop="date"></el-table-column>
<el-table-column label="主表列2" prop="name"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
details: [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
// ...更多从表数据
],
},
// ...更多主表数据
],
};
},
};
</script>
在这个例子中,el-table
组件被嵌套使用。外层的el-table
是主表格,内层的el-table
是折叠后展示的从表细节。主表数据通过data
属性绑定,而从表数据作为主表数据中的一个字段存在。点击主表数据的行,相应的从表数据会展开。