element的table中的多级表头

最新推荐文章于 2024-08-16 17:45:38 发布

水蜜桃那么甜

最新推荐文章于 2024-08-16 17:45:38 发布

阅读量4.8k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/Lemontree_fu/article/details/102836373

版权

本文介绍了如何在Element UI中创建多级表头。通过在`el-table-column`组件中嵌套`el-table-column`，可以轻松实现这一功能。示例代码展示了具体的实现方式，操作简便。

摘要由CSDN通过智能技术生成

之前用element写页面都是写的一级表头，今天后台让写一个多级表头的页面，刚开始也很蒙。后来发现element官网中有教学，于是就做出了下面这样的效果

其实思路很简单，只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

下面是代码

                   <el-table
                      :data="rows"
                      border
                      style="width: 100%">
                      <!-- 收费方式名称 -->
                      <el-table-column
                        prop="Name"
                        width="70"
                        label="收费方式名称">
                      </el-table-column>
                      <!-- 停车费 -->
                      <el-table-column
                      label="停车费">
                            <el-table-column
                            label="按次">
                                <el-table-column
                                    prop="PerTimesPark"
                                    width="50"
                                    label="每次停车">
                                </el-table-column>
                                <el-table-column
                                    prop="NightPark"
                                    width="50"
                                    label="过夜停车">
                                </el-table-column>
                            </el-table-column>
                            <el-table-column
                            label="按时收费/按时收费A/按段循环收费">
                                 <el-table-column
                                    prop="LimitMoney"
                                    width="50"
                                    label