1. Toy模板网首页
  2. > Toy博客

el-table单元格合并思路

9月前 作者：白昼的星光@ 分类：Toy博客 阅读(40) 违法举报

这篇具有很好参考价值的文章主要介绍了el-table单元格合并思路。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

el-table单元格合并

el-table单元格合并的关键是el-table的span-method属性，本文将讲解一下我在单元格合并的思路，本人前端小白，可能有理解错误仅供参考，本文重点介绍思路，毕竟每个人需求不一样

注意：有时候不需要单元格合并，可以使用插槽

前提

单元格的合并必须得有数据，所以应该先准备好合并前的数据，在有数据的基础上做减法

  • 合并前 – 每一行的数据都是双份的这样虽然数据变多了，但是给了我们操作行的空间
    el-table 合并,vue.js,前端,javascript

  • 合并后 其中一行被合并就看不见了
    el-table 合并,vue.js,前端,javascript

  • 分析 需要合并三个部分
    el-table 合并,vue.js,前端,javascript

表头合并

在el-table中嵌套使用el-table-column即可实现多级表头、列的数据放在最底层el-table-column

el-table 合并,vue.js,前端,javascript
什么是最底层的column-table-column呢?
el-table 合并,vue.js,前端,javascript
表头和数据结合应该是这样

<template>
  <div>
    <el-table :data="data" border>
      <!-- 第一列 -->
      <el-table-column label="进粉日期" prop="column1" align="center"></el-table-column>
      <!-- 第二列 -->
      <el-table-column label="广告费" prop="column2" align="center"></el-table-column>
      <!-- 第三列 -->
      <el-table-column label="线索数" prop="column3" align="center"></el-table-column>
      <!-- 第四列 第一层-->
      <el-table-column label="2022-12" align="center">
        <!-- 第四列第二层 -->
        <el-table-column label="发货总金额" align="center">
          <!-- 第四列第三层-1 -->
          <el-table-column label="单数" prop="column4" align="center"></el-table-column>
          <!-- 第四列第三层-2 -->
          <el-table-column label="线索单产" prop="column5" align="center"></el-table-column>
          <!-- 第四列第三层-3 -->
          <el-table-column label="广告会产率" prop="column6" align="center"></el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
  let data = ref([]);
    data.value = [
      { column1:'2023-01-01',column2:'10',column3:'100',column4:'1000',column5:'1',column6:'1',column7:"111" },
      { column1:'2023-01-01',column2:'10',column3:'100',column4:'1000',column5:'1',column6:'1',column7:"111" },
      { column1:'2023-02-02',column2:'20',column3:'200',column4:'2000',column5:'2',column6:'2',column7:"222" },
      { column1:'2023-02-02',column2:'20',column3:'200',column4:'2000',column5:'2',column6:'2',column7:"222" },
      { column1:'2023-03-03',column2:'30',column3:'300',column4:'3000',column5:'3',column6:'3',column7:"333" },
      { column1:'2023-03-03',column2:'30',column3:'300',column4:'3000',column5:'3',column6:'3',column7:"333" },
    ];
</script>

el-table 合并,vue.js,前端,javascript

合并行

我们在上面代码的基础上对前三列进行行合并，偶数行是保留的行，奇数行将被隐藏

// el-table :span-method="spanMethods"
function spanMethods({ row, column, rowIndex, columnIndex }) {
  let _row = 0;
  let _col = 0;
  // 前三列
  if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
    if (rowIndex % 2 == 0) {
      _row = 2; // 偶数行 两行
      _col = 1;
    } else {
      _row = 0; // 奇数行 0行
      _col = 1;
    }
    return {
      rowspan: _row,
      colspan: _col,
    };
  }
}

el-table 合并,vue.js,前端,javascript

合并列

这里的列合并其实是将偶数行的第4列扩展、第5和6列合并

  // 第四列
  if (columnIndex == 3) {
    if (rowIndex % 2 == 0) {
      // 偶数行时
      _row = 1;
      _col = 3; // 跨三列
      return {
        rowspan: _row,
        colspan: _col,
      };
    }
  }
  // 第五、六列
  if (columnIndex == 4 || columnIndex == 5) {
    if (rowIndex % 2 == 0) {
      // 偶数行时
      _row = 1;
      _col = 0; // 跨0列
      return {
        rowspan: _row,
        colspan: _col,
      };
    }
  }

el-table 合并,vue.js,前端,javascript
现在有一个问题，现在发货总金额和单数用的其实是一组数据，需要去表格模板中修改

<!-- 第四列第三层-1 -->
<el-table-column label="单数" prop="column4" align="center">
  <!-- 这里需要特殊处理 -->
  <template #default="scope">
    <!-- 偶数行 -->
    <span v-if="scope.$index % 2 == 0">{{ scope.row.column7 }}</span>
    <!-- 奇数行 -->
    <span v-else>{{ scope.row.column4 }}</span>
  </template>
</el-table-column>

el-table 合并,vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-523034.html

完整代码

<template>
  <div>
    <el-table :data="data" :span-method="spanMethods" border>
      <!-- 第一列 -->
      <el-table-column label="进粉日期" prop="column1" align="center"></el-table-column>
      <!-- 第二列 -->
      <el-table-column label="广告费" prop="column2" align="center"></el-table-column>
      <!-- 第三列 -->
      <el-table-column label="线索数" prop="column3" align="center"></el-table-column>
      <!-- 第四列 第一层-->
      <el-table-column label="2022-12" align="center">
        <!-- 第四列第二层 -->
        <el-table-column label="发货总金额" align="center">
          <!-- 第四列第三层-1 -->
          <el-table-column label="单数" prop="column4" align="center">
            <!-- 这里需要特殊处理 -->
            <template #default="scope">
              <!-- 偶数行 -->
              <span v-if="scope.$index % 2 == 0">{{ scope.row.column7 }}</span>
              <!-- 奇数行 -->
              <span v-else>{{ scope.row.column4 }}</span>
            </template>
          </el-table-column>
          <!-- 第四列第三层-2 -->
          <el-table-column label="线索单产" prop="column5" align="center"></el-table-column>
          <!-- 第四列第三层-3 -->
          <el-table-column label="广告会产率" prop="column6" align="center"></el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
  import {
    ref,
    reactive
  } from "vue";
  let data = ref([]);
    data.value = [
      { column1:'2023-01-01',column2:'10',column3:'100',column4:'1000',column5:'1',column6:'1',column7:"111" },
      { column1:'2023-01-01',column2:'10',column3:'100',column4:'1000',column5:'1',column6:'1',column7:"111" },
      { column1:'2023-02-02',column2:'20',column3:'200',column4:'2000',column5:'2',column6:'2',column7:"222" },
      { column1:'2023-02-02',column2:'20',column3:'200',column4:'2000',column5:'2',column6:'2',column7:"222" },
      { column1:'2023-03-03',column2:'30',column3:'300',column4:'3000',column5:'3',column6:'3',column7:"333" },
      { column1:'2023-03-03',column2:'30',column3:'300',column4:'3000',column5:'3',column6:'3',column7:"333" },
    ];

  function spanMethods({
    row,
    column,
    rowIndex,
    columnIndex
  }) {
    let _row = 0;
    let _col = 0;
    // 前三列
    if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
      if (rowIndex % 2 == 0) {
        _row = 2; // 偶数行 两行
        _col = 1;
      } else {
        _row = 0; // 奇数行 0行
        _col = 1;
      }
      return {
        rowspan: _row,
        colspan: _col,
      };
    }
    // 第四列
    if (columnIndex == 3) {
      if (rowIndex % 2 == 0) {
        // 偶数行时
        _row = 1;
        _col = 3; // 跨三列
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    }
    // 第五、六列
    if (columnIndex == 4 || columnIndex == 5) {
      if (rowIndex % 2 == 0) {
        // 偶数行时
        _row = 1;
        _col = 0; // 跨0列
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    }
  }

</script>

到了这里，关于el-table单元格合并思路的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Vue+Element-UI 中 el-table 动态合并单元格 :span-method 方法

    Vue+Element-UI 中 el-table 动态合并单元格 :span-method 方法

    记录一下工作时遇到的 el-table 合并单元格的需求，超详细😊 el-table官方提供了合并单元格的方法与返回格式 如下: 根据叙述有了如下思路: 因为后端返回的数据非统一, 可能不是按照类别排好的😨, 所以官网的例子满足不了所有的需求所以我们通过遍历table的数据比较前后两

    2024年02月12日
    浏览(65)
  • el-table 合并单元格（合并行）

    el-table 合并单元格（合并行）

    1.  添加 :span-method=\\\"objectSpanMethod\\\"  2.  写objectSpanMethod 方法 其中，switch中 0和1 是根据下面这张图中的顺序来的，  完整代码如下：

    2024年02月11日
    浏览(40)
  • el-table合并单元格

    el-table合并单元格

    el-tabel数据结构 此处为this.rolePermitItemList 合并后的样式： el-table-column 需要添加property字段，属性值同props，用来判断需要合并的字段

    2024年02月14日
    浏览(43)
  • el-table 怎么合并相同单元格

    el-table 怎么合并相同单元格

    问题背景 项目需求table表格中，相同的类型合并成一个单元格展示。 问题描述 el-table 并没有相关的语法直接合并，需要我们自己传入一个方法返回一个数组格式，来确定要合并行列。 解决问题 首先需要在 el-table 标签上绑定 :span-method=\\\"objectSpanMethod\\\" 再去 methods 中定义 object

    2024年02月16日
    浏览(47)
  • 【前端vue+elemenui】el-table根据表格数据设置整行样式或单元格样式

    【前端vue+elemenui】el-table根据表格数据设置整行样式或单元格样式

    首先需要了解俩个函数，row-class-name、cell-class-name 这里以cell-class-name单元格样式为例 row-class-name 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 Function({row, rowIndex})/String cell-class-name 单元格的 className 的回调方法，也可以使用字符串为所有单元

    2024年01月24日
    浏览(53)

  • Element ui el-table 合并单元格

      el-table v-loading=\\\"loading\\\" :data=\\\"tableData\\\" style=\\\"width: 100%\\\" highlight-current-row :span-method=\\\"arraySpanMethod\\\"         el-table-column type=\\\"index\\\" label=\\\"序号\\\" /         el-table-column v-for=\\\"item in formThead\\\" :key=\\\"item.label\\\" :label=\\\"item.label\\\" :prop=\\\"item.prop\\\" :formatter=\\\"item.formatter\\\" :width=\\\"item.width || \\\'auto\\\'\\\" /        

    2024年02月02日
    浏览(37)
  • el-table 表格懒加载的同时合并单元格

    el-table 表格懒加载的同时合并单元格

    2024年02月05日
    浏览(61)
  • element-ui中的el-table合并单元格

    element-ui中的el-table合并单元格

    在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下：  而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下：   1：html部分 所谓的合并行就是将多行相同

    2024年02月10日
    浏览(43)

  • element-ui el-table 如何实现合并单元格

    el-table的组件的可以合并单元格，先定义参数span-method 方法objectSpanMethod。在方法内控制当前单元格渲染成几个单元格或者删除掉当前单元格。 比如：代码中定义:span-method=\\\"objectSpanMethod\\\" objectSpanMethod实现是在方法区，具体内容是根据变量rowSpanList 去决定当前单元格是展示还是删

    2024年02月03日
    浏览(48)
  • el-table实现静态和动态合并单元格 以及内容显示的问题

    el-table实现静态和动态合并单元格 以及内容显示的问题

    实现效果图

    2024年02月12日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包