element-ui table 合并单元格封装方法可直接调用即可

最新推荐文章于 2023-09-04 14:35:20 发布

原创最新推荐文章于 2023-09-04 14:35:20 发布 · 694 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue

本文介绍 Element UI 中实现表格单元格合并的具体方法，包括通过 `span-method` 属性自定义合并逻辑及样式调整技巧。适用于需要优化前端表格展示效果的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui table 合并单元格封装方法可直接调用即可

我们在使用table表格时总会遇到需要合并单元格的需求

示例
在这里插入图片描述

请看代码

  <el-table
   :data="tableData"
   class="table"
   border
   ref="multipleTable"
   element-loading-text="数据加载中..."
   :span-method="objectSpanMethod"	//这里是表格的合并方法
 >
  <el-table-column prop="assessment_items" label="考核项" align="center" />
  <el-table-column prop="assessment_contract" label="考核内容" align="center" />
  <el-table-column prop="assessment_describe" label="描述" align="center" />
 </el-table>

js封装方法

 // 列表方法
 objectSpanMethod(obj) {
 //***注意重点是这里代表需要合并的第几行，此处我是，第1，下标从0开始所以是0 依次类推 
 // if (obj.columnIndex === 0 || obj.columnIndex === 1||obj.columnIndex === 2) 这里展示 为多个 1 2 3列 下标 0 1 2
   if (obj.columnIndex === 0) {
     // 二维数组存储的数据 取出
     var _row = this.spanArr[obj.rowIndex];
     var _col = _row > 0 ? 1 : 0;
     return {
       rowspan: _row,
       colspan: _col,
     };
   } else {
     return false;
   }
 },
 //封装的方法 -- getSpanArr这个方法是对数据进行遍历，判断是否进行合并
 getSpanArr(data) {
   var vm = this;
   vm.spanArr = [];
   vm.pos = 0;
   data.forEach((item, index) => {
     //判断是否是第一项
     if (index === 0) {
       vm.spanArr.push(1);
       vm.pos = 0;
     } else {
       //不是第一项时，就根据标识去存储
       //如果多列表合并  data[index].assessment_items=== data[index - 1].assessment_items &&
       //  data[index].其他字段名称 === data[index - 1].其他字段名称 &&
       //  data[index].其他字段名称 === data[index - 1].其他字段名称

		//注意这里 这个字段 是 列表的字段 我这里模拟第一个 用	assessment_items; 要使用  && 
       if (
         data[index].assessment_items=== data[index - 1].assessment_items
       ) {
         // 查找到符合条件的数据时每次要把之前存储的数据+1
         vm.spanArr[vm.pos] += 1;
         vm.spanArr.push(0);
       } else {
         // 没有符合的数据时，要记住当前的index
         vm.spanArr.push(1);
         vm.pos = index;
       }
     }
   });
 },
 //模拟请求接口
 getData(){
 	// ajax 请求后 为 list 直接将数据丢进去
	this.getSpanArr(list);
 }

附加

使用简单的样式来合并表头

示例
在这里插入图片描述
请看代码

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%" :header-cell-style="handerMethod">
    //这里需要包裹两条数据
      <el-table-column label="ID" class-name="type-column">
        <el-table-column prop="amount1"></el-table-column>
        <el-table-column align="center" prop="amount2"></el-table-column>
      </el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
    //模拟参数
      tableData: [
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
        },
        {
          id: "12987123",
          name: "王小虎",
          amount1: "165",
          amount2: "4.43",
        },
        {
          id: "12987124",
          name: "王小虎",
          amount1: "324",
          amount2: "1.9",
        },
        {
          id: "12987125",
          name: "王小虎",
          amount1: "621",
          amount2: "2.2",
        },
        {
          id: "12987126",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
        },
      ],
    };
  },
  methods: {
    //隐藏表头
    handerMethod({ rowIndex }) {
      if (rowIndex === 1) {
        //这里为了是将第二列的表头隐藏，就形成了合并表头的效果
        return { display: "none" };
      }
    },
  },
};
</script>