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

news/2024/12/29 22:21:45/

通用方法

<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) {// 判断其值是不是为0if (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 一个 1if (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>

效果:
在这里插入图片描述


http://www.ppmy.cn/news/1156941.html

相关文章

git 中如何删除 Untracked files 文件

git 中如何删除 Untracked files 前言 前言 有时候&#xff0c;对于代码的改动&#xff0c;并不想提交&#xff0c;或者想直接拉取更新最新的远程仓库代码&#xff0c;但本地的代码已经做了很多的改动。解决办法&#xff1a; 一、Untracked files&#xff08;未监控&#xff…

mysql——面试题初体验

查询环境 1、student&#xff08;学生表&#xff09; 2、课程表(course) 3、教师表(teacher) 4、成绩表(score) 问题 (1) 查询所有学生的学号、姓名、选课数、总成绩 mysql> select s.s_id as 学号,s.s_name as 姓名 from student as s; ---------------- | 学号 | 姓名…

SQL和Python,哪个更容易自学?哪个更适合数据工作的编程新手?

如果你想从事数据工作&#xff0c;比如数据分析、数据开发、数据科学等&#xff0c;你可能会遇到这样的问题&#xff1a;SQL和Python哪个更容易自学&#xff1f;哪个更有用&#xff1f;哪个更有前途&#xff1f;其实这两种语言都是数据工作的重要技能&#xff0c;但它们的特点和…

为什么要做数据可视化

在当今信息爆炸的时代&#xff0c;数据已成为个人和企业最宝贵的资产之一。然而&#xff0c;仅仅拥有大量的数据并不足以支持明智的决策。数据可视化&#xff0c;作为一种将数据转化为图形形式的技术和方法&#xff0c;可以帮助我们更好地理解和分析数据&#xff0c;从而更准确…

ES6中什么是Promise?

Promise 是 JavaScript 中的一种异步编程模式&#xff0c;用于更好地处理异步操作和避免回调地狱&#xff08;Callback Hell&#xff09;。Promise 表示一个异步操作的最终完成或失败&#xff0c;它有以下特点&#xff1a; 状态&#xff1a;Promise 可以处于三种状态之一&#…

2023年中国超硬材料制品分析及超硬刀具市场规模分析[图]

超硬材料是指硬度特别高的材料&#xff0c;可分为天然以及人造两种&#xff0c;前者主要包括天然的钻石&#xff08;金刚石&#xff09;、黑钻石&#xff0c;后者则包括人造金刚石、立方氮化硼。 超硬材料制品分类 资料来源&#xff1a;共研产业咨询&#xff08;共研网&#x…

冲刺十五届蓝桥杯P0006平面切分

文章目录 题目思路代码总结 题目 平面切分 思路 这道题是一个思维题把&#xff0c;之前没有接触过平面几何的知识&#xff0c;做起来感觉还是比较难的&#xff0c;用到的set集合和自己创建一个类 首先我们知道&#xff0c;一根直线A是可以将平面切分成两块的&#xff0c;如…

【限时免费】20天拿下华为OD笔试之【双指针】2023Q1A-最长的元音字符串【欧弟算法】全网注释最详细分类最全的华为OD真题题解

【双指针】2023Q1A-最长的元音字符串 题目描述与示例 题目 定义当一个字符串只有元音字母(a,e,i,o,u,A,E,I,O,U)组成,称为元音字符串&#xff0c;现给定一个字符串&#xff0c;请找出其中最长的元音字符串&#xff0c;并返回其长度&#xff0c;如果找不到请返回0。 字符串中…