vue之elementui等表格单元格列合并

通用方法

js 复制代码
<template>
	 <Table
          :columns="columns"
          :data="tableData"
          :loading="loading"
          :span-method="handleSpan"
        ></Table>
</template>
<script>
export default {
 data(){
 	return {
		   mergeObj: {}, // 用来记录需要合并行的下标
      	   mergeArr: ["name"], // 表格中的列名
	} 
 },
 methods(){
	  /**
     * 合并单元格
     */
    handleSpan({ row, column, rowIndex, columnIndex }) {
      // 判断列的属性
      if (this.mergeArr.indexOf(column.key) !== -1) {
        // 判断其值是不是为0
        if (this.mergeObj[column.key][rowIndex]) {
          return [this.mergeObj[column.key][rowIndex], 1];
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
    //获取合并配置明细
    getSpanArr(data) {
      this.mergeArr.forEach((key, index1) => {
        let count = 0; // 用来记录需要合并行的起始位置
        this.mergeObj[key] = []; // 记录每一列的合并信息
        data.forEach((item, index) => {
          // index == 0表示数据为第一行,直接 push 一个 1
          if (index === 0) {
            this.mergeObj[key].push(1);
          } else {
            // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
            if (item[key] === data[index - 1][key]) {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              // 如果当前行和上一行其值不相等
              count = index; // 记录当前位置
              this.mergeObj[key].push(1); // 重新push 一个 1
            }
          }
        });
      });
    },
  }
 }
</script>

效果:

相关推荐
新中地GIS开发老师11 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang19 分钟前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。19 分钟前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
左手吻左脸。19 分钟前
Element UI表格中根据数值动态设置字体颜色
vue.js·ui·elementui
李白的故乡19 分钟前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_24 分钟前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含27 分钟前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端28 分钟前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友36 分钟前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端