实现效果
文章来源：https://www.toymoban.com/news/detail-634477.html
模板
<!-- 查询条件 -->
<el-form label-width="60px" class="query-form">
<el-form-item label="状态:">
<el-select v-model="queryBody.status" clearable placeholder="请选择状态">
<el-option
v-for="item in status"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="大标题:" class="query-title">
<el-input
v-model="queryBody.fuzzy"
placeholder="请输入大标题关键字"
clearable
/>
</el-form-item>
<el-button type="primary" class="query-btn" @click="queryIntegrateList">
查询
</el-button>
</el-form>
<!-- 列表表格区域 -->
<el-table ref="refTable" :data="integrateList" border stripe
style="width: 100%" @expand-change="expandChange"
>
<el-table-column type="expand">
<template slot-scope="scope">
<el-form label-position="left" inline class="demo-table-expand">
<el-table :data="scope.row.child" border stripe style="width: 100%">
<el-table-column type="index" />
<el-table-column prop="title" label="小标题" />
<el-table-column prop="author" label="作者" />
<el-table-column label="操作" width="180px">
<template slot-scope="scope">
<el-button
circle
type="primary"
icon="el-icon-search"
size="mini"
@click="xxx(scope.row.id)"
/>
</template>
</el-table-column>
</el-table>
</el-form>
</template>
</el-table-column>
<el-table-column prop="title" label="大标题" />
<el-table-column prop="child.length" label="包含数量" />
<el-table-column label="状态" prop="status">
<template slot-scope="scope">
<el-tag v-if="scope.row.status== 0" type="warning">
审核中
</el-tag>
<el-tag v-else-if="scope.row.status== 1" type="success">
审核通过
</el-tag>
<el-tag v-else type="danger">
审核驳回
</el-tag>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
:current-page="queryParams.pages"
:page-sizes="[5,10, 15, 20]"
:page-size="queryParams.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
js
data () {
return {
// 大栏目列表数据
integrateList: [],
total: 0,
// 查询参数对象1(放在请求的params里,以？形式拼接)
queryParams: {
pages: 1,
size: 5
},
// 查询参数对象
queryBody: {
fuzzy: '',
status: ''
},
// 大栏目状态下拉列表
status: [
{
value: '',
label: '全部'
},
{
value: '0',
label: '审核中'
},
{
value: '1',
label: '审核通过'
},
{
value: '2',
label: '审核驳回'
}
]
}
},
mounted () {
this.InitIntegrateList()
},
methods: {
InitIntegrateList () {
//调用接口，初始化大栏目列表
},
//点击查询按钮触发
queryIntegrateList () {
this.queryParams.pages = 1
this.InitIntegrateList()
},
//页面数据条数发生变化触发
handleSizeChange (newPageSize) {
this.queryParams.size = newPageSize
this.InitIntegrateList()
},
//页码发生变化触发
handleCurrentChange (newPageNum) {
this.queryParams.pages = newPageNum
this.InitIntegrateList()
},
//根据id查询信息
xxx(id) {
//可能针对id调接口，查询展示信息
},
// 只允许出现一个展开的大栏目
expandChange (row, expandedRows) {
let that = this
if (expandedRows.length > 1) {
that.expands = []
if (row) {
that.expands.push(row)
}
this.$refs.refTable.toggleRowExpansion(expandedRows[0])
} else {
that.expands = []
}
}
}
样式
.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%;
}
.query-form {
display: flex;
.query-title {
margin: 0 95px 0;
}
}
其它说明
data中integrateList根据后端返回的json数据确定，其格式为：文章来源地址https://www.toymoban.com/news/detail-634477.html
[
{
"id": "1",
"title": "yyy",
"status": 1,
"child": [
{
"id": "1",
"title": "yyyy",
"author": "admin",
...
}
]
},
{
"id": "2",
"title": "2-777",
"status": 0,
"child": [
{
"id": "1",
"title": "ttt",
"author": "t1",
...
},
{
"id": "2",
"title": "qqq",
"author": "q1",
...
}
]
}
]
到了这里，关于Vue+Element-ui实现表格嵌套表格（表头不同）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
