ElementUi+vue根据相同内容合并单元格

最新推荐文章于 2024-10-15 15:49:37 发布

ly-learn-mn

最新推荐文章于 2024-10-15 15:49:37 发布

阅读量975

点赞数

文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/qq_41988054/article/details/117413786

版权

本文介绍如何在ElementUI中结合Vue.js，通过判断数据内容来合并表格的单元格，具体步骤包括理解数据结构，展示未合并的单元格状态，然后详细讲解根据城市名进行单元格合并的实现过程，并提供了相关代码示例和外部资源链接。

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

（1）数据结构

在这里插入图片描述
（2）未合并前单元格

（3）根据城市名合并单元格

（4）代码如下

//新增合并单元格
      flitterData(arr){
        let spanOneArr = []
        let concatOne = 0
        arr.forEach((item,index)=>{
          if(index === 0){
            spanOneArr.push(1);
          }else{
            //cityName 修改
            if(item.cityName === arr[index - 1].cityName){ //第一列需合并相同内容的判断条件
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            }else{
              spanOneArr.push(1);
              concatO