Element UI多级表头的使用，附上详细的代码案例。

最新推荐文章于 2024-06-21 11:27:06 发布

Beblien

最新推荐文章于 2024-06-21 11:27:06 发布

阅读量1.4k

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_50656154/article/details/126968378

版权

对于官方文档给出的案例，似乎只有一级表头，实际项目中可能会用到多级表头。

这里采用样例图片加详细代码的方式给大家介绍：

附上代码，实际表头格式对本表作参考，以此类推即可。

        <el-table
          :data="tableData"
          border
        >
          <el-table-column prop="" label="A1" fixed="left"></el-table-column>
          <el-table-column prop="" label="A2" fixed="left"></el-table-column>

          <el-table-column prop="" label="A3">
            <template>
              <el-table-column prop="" label="B1">                  
                    <template>
                  <el-table-column prop="" label="C1" fixed="left"></el-table-column>
                  <el-table-column prop="" label="C2">
                    <template>
                      <el-table-column prop="" label="D1"></el-table-column>
                      <el-table-column prop="" label="D2"></el-table-column>
                      <el-table-column prop="" label="D3"></el-table-column>
                      <el-table-column prop="" label="D4"></el-table-column>
                    </template>
                  </el-table-column>
                  <el-table-column prop="" label="C3">
                    <template>
                      <el-table-column prop="" label="E1"></el-table-column>
                      <el-table-column prop="" label="E2"></el-table-column>
                      <el-table-column prop="" label="E3"></el-table-column>
                      <el-table-column prop="" label="E4"></el-table-column>
                    </template>
                  </el-table-column>
                  <el-table-column prop="" label="C4">
                    <template>
                      <el-table-column prop="" label="F1"></el-table-column>
                      <el-table-column prop="" label="F2"></el-table-column>
                      <el-table-column prop="" label="F3"></el-table-column>
                      <el-table-column prop="" label="F4"></el-table-column>
                    </template>
                  </el-table-column>
                  <el-table-column prop="" label="C5">
                    <template>
                      <el-table-column prop="" label="G1"></el-table-column>
                      <el-table-column prop="" label="G2"></el-table-column>
                      <el-table-column prop="" label="G3"></el-table-column>
                      <el-table-column prop="" label="G4"></el-table-column>
                    </template>
                  </el-table-column>
                  <el-table-column prop="" label="C6">
                    <template>
                      <el-table-column prop="" label="H1"></el-table-column>
                      <el-table-column prop="" label="H2"></el-table-column>
                      <el-table-column prop="" label="H3"></el-table-column>
                      <el-table-column prop="" label="H4"></el-table-column>
                    </template>
                  </el-table-column>
                </template>

              </el-table-column>
        </el-table>