Vue+Element-ui实现表格嵌套表格（表头不同）

Vue+Element-ui实现表格嵌套表格

实现效果

模板

<!-- 查询条件 --><el-formlabel-width="60px"class="query-form"><el-form-itemlabel="状态:"><el-selectv-model="queryBody.status"clearableplaceholder="请选择状态"><el-optionv-for="item in status":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-itemlabel="大标题:"class="query-title"><el-inputv-model="queryBody.fuzzy"placeholder="请输入大标题关键字"clearable/></el-form-item><el-buttontype="primary"class="query-btn"@click="queryIntegrateList">
    查询
  </el-button></el-form><!-- 列表表格区域 --><el-tableref="refTable":data="integrateList"borderstripestyle="width: 100%"@expand-change="expandChange"><el-table-columntype="expand"><templateslot-scope="scope"><el-formlabel-position="left"inlineclass="demo-table-expand"><el-table:data="scope.row.child"borderstripestyle="width: 100%"><el-table-columntype="index"/><el-table-columnprop="title"label="小标题"/><el-table-columnprop="author"label="作者"/><el-table-columnlabel="操作"width="180px"><templateslot-scope="scope"><el-buttoncircletype="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-columnprop="title"label="大标题"/><el-table-columnprop="child.length"label="包含数量"/><el-table-columnlabel="状态"prop="status"><templateslot-scope="scope"><el-tagv-if="scope.row.status== 0"type="warning">
        审核中
      </el-tag><el-tagv-else-if="scope.row.status== 1"type="success">
        审核通过
      </el-tag><el-tagv-elsetype="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 =1this.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 =thisif(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数据确定，其格式为：

[
    {
        "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",
                 ...
            }
        ]
    }
]