vue3 elementplus table合并

最新推荐文章于 2025-09-18 14:55:20 发布

原创

最新推荐文章于 2025-09-18 14:55:20 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue3 #elementplus

本文介绍了在Vue3中使用ElementPlus组件库进行表格合并的方法，包括单行合并的步骤和如何通过Render函数实现两行的下方合并。详细讲解了相关属性设置和条件判断，帮助开发者实现复杂表格布局。

在这里插入图片描述
table表格下方合并写法：
1：单行合并
（1）在标签中加入属性

   :summary-method="getSummaries"
            :show-summary="true"

 <el-table
            :data="data"
            id="tableRef"
            ref="tableRef"
            row-key="belnr"
            class="td-bacg-white"
            :summary-method="getSummaries"
            :show-summary="true"
          >
            <template v-for="(item1, index1) in tableColumns">
              <template v-if="item1.children">
                <el-table-column
                  :key="index1"
                  :label="item1.title"
                  align="center"
                >
                  <template v-for="item in item1.children">
                    <el-table-column
                      v-if="!item.hidden"
                      :align="item.align || 'center