實(shí)現(xiàn)效果

模板

<!-- 查詢條件 -->
<el-form label-width="60px" class="query-form">
  <el-form-item label="狀態(tài):">
    <el-select v-model="queryBody.status" clearable placeholder="請(qǐng)選擇狀態(tài)">
      <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="大標(biāo)題:" class="query-title">
    <el-input
      v-model="queryBody.fuzzy"
      placeholder="請(qǐng)輸入大標(biāo)題關(guān)鍵字"
      clearable
    />
  </el-form-item>
  <el-button type="primary" class="query-btn" @click="queryIntegrateList">
    查詢
  </el-button>
</el-form>
<!-- 列表表格區(qū)域 -->
<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="小標(biāo)題" />
          <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="大標(biāo)題" />
  <el-table-column prop="child.length" label="包含數(shù)量" />
  <el-table-column label="狀態(tài)" 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 {
    // 大欄目列表數(shù)據(jù)
    integrateList: [],
    total: 0,

    // 查詢參數(shù)對(duì)象1(放在請(qǐng)求的params里,以？形式拼接)
    queryParams: {
      pages: 1,
      size: 5
    },

    // 查詢參數(shù)對(duì)象
    queryBody: {
      fuzzy: '',
      status: ''
    },
    
    // 大欄目狀態(tài)下拉列表
    status: [
      {
        value: '',
        label: '全部'
      },
      {
        value: '0',
        label: '審核中'
      },
      {
        value: '1',
        label: '審核通過'
      },
      {
        value: '2',
        label: '審核駁回'
      }
    ]
  }
},
mounted () {
  this.InitIntegrateList()
},
methods: {
  InitIntegrateList () {
    //調(diào)用接口，初始化大欄目列表
  },
  
  //點(diǎn)擊查詢按鈕觸發(fā)
  queryIntegrateList () {
    this.queryParams.pages = 1
    this.InitIntegrateList()
  },
  
  //頁面數(shù)據(jù)條數(shù)發(fā)生變化觸發(fā)
  handleSizeChange (newPageSize) {
    this.queryParams.size = newPageSize
    this.InitIntegrateList()
  },
  
  //頁碼發(fā)生變化觸發(fā)
  handleCurrentChange (newPageNum) {
    this.queryParams.pages = newPageNum
    this.InitIntegrateList()
  },
  
  //根據(jù)id查詢信息
  xxx(id) {
    //可能針對(duì)id調(diào)接口，查詢展示信息
  },

  // 只允許出現(xiàn)一個(gè)展開的大欄目
  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根據(jù)后端返回的json數(shù)據(jù)確定，其格式為：文章來源地址http://www.zghlxwxcb.cn/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",
                 ...
            }
        ]
    }
]

到了這里，關(guān)于Vue+Element-ui實(shí)現(xiàn)表格嵌套表格（表頭不同）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！