Vue+Element-ui实现表格嵌套表格（表头不同）_vue 写表格里面包含表格

实现效果

模板

<!-- 查询条件 -->
<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"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

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 = []
    }
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

样式

.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;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

其它说明

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",
                 ...
            }
        ]
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34