首页 > 其他分享 >vue+elementui 合并行

vue+elementui 合并行

时间:2023-06-03 09:13:31浏览次数:39  
标签:index vue spanArr elementui 合并 ele push position tableData

1,数据格式是二维的

如:o:{id:123,

  prams:{name:aaa,age:11}

  }

的对象

第一步:先获取返回的数据为indexInfoList,遍历转化为一维数组

 that.indexInfoList.forEach(ele => {
if (ele.prams.length >= 1) {
                ele.prams.map((related, index) => {
                  let aaarr = {};//要拿出来的数据组成新的对象
                 let brr = Object.assign({}, ele, aaarr);//和原来的数据对象拼接成一个新的
                  arr.push(brr);
                });
              } else {
                arr.push(ele);
              }
            });

  得到新的数组

that.tableData = arr; // 得到拼接后的内容  that.rowspan(); // 重新合并行
 rowspan() {
      // 每次调用清空数据
      this.spanArr = [];
      this.position = 0;
      console.log(this.tableData);
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          // recordId 为需要合并查询的项
          if (
            this.tableData[index].recordId ===
            this.tableData[index - 1].recordId
          ) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
    },
//调用elementUI的合并方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex <= 9) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },

 

标签:index,vue,spanArr,elementui,合并,ele,push,position,tableData
From: https://www.cnblogs.com/shirley-csdn/p/17453278.html

相关文章

  • Vue——自动切换图片
    利用属性指令+setInterval(是一个实现定时调用的函数)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="js/vue.js"></script></head>......
  • Vue——属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、过滤
    vm对象<body><divid="app"><h1>{{name}}</h1><button@click="handleClick">点我</button></div></body><script>//1写在data或method中的属性或方法,从vm中直接可以点出来//2method的函数中,如......
  • vuepress快速安装笔记
    参考https://vuepress.vuejs.org/guide/getting-started.html#prerequisiteshttps://blog.llyth.cn/1065.html注意:应该是cd到新建项目文件夹的docs里,然后yarninstall。在项目文件夹里,执行yarndev启动运行项目,yarnbuild生产静态文件,结果与文件路径如下。waitRenderings......
  • vue解决跨域方法
    什么是跨域  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域。这里列举一个经典的列子:#协议跨域http://a.baidu.com访问https://a.baidu.com;#端口跨域http://a.baidu.com:8080访问http://a.baidu.com:80;#域......
  • vue学习笔记一
    VUE自学目录VUE自学一、vue核心的相关学习一,搭建vue开发环境1.下载vue.js2.下载扩展工具二,helloworld案例三,helloworld项目扩展四,模板语法五,数据绑定六,el和data的两种写法发七,理解MVVM模型八,数据代理1.Object.defineProperty2.什么是数据代理3.vue中的数据代理九,事件处理1.事件......
  • vue、js onSelect事件 获取选中的值
    https://huaweicloud.csdn.net/639ff5afdacf622b8df90ecc.html?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~activity-1-125977595-blog-51669331.235^v36^pc_relevant_default_base3&depth_1-ut......
  • 总结vue3 的一些知识点:Vue.js 安装
    Vue.js安装1、独立版本我们可以在Vue.js的官网上直接下载vue.min.js并用 <script> 标签引入。下载Vue.js2、使用CDN方法以下推荐国外比较稳定的两个CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。StaticfileCDN(国内) : https://cdn.staticfile.org/v......
  • 总结vue3 的一些知识点:Vue.js 安装
    Vue.js安装1、独立版本我们可以在Vue.js的官网上直接下载vue.min.js并用 <script> 标签引入。下载Vue.js2、使用CDN方法以下推荐国外比较稳定的两个CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。StaticfileCDN(国内) : https://cdn.staticfile.org/v......
  • Vue——前端发展史、Vue介绍和使用、插值语法、文本指令、事件指令
    前端的发展史#1HTML(5)、CSS(3)、JavaScript(ES5、ES6):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看 javascript=ECMAScript(5,6,13)+Dom+Bom#2Ajax的出现->后台发送异步请求,Ren......
  • 总结vue3 的一些知识点:​Vue.js 条件语句​
    Vue.js条件语句条件判断v-if条件判断使用v-if指令:v-if指令在元素和template中使用v-if指令:<divid="app"><pv-if="seen">现在你看到我了</p><templatev-if="ok"><h1>菜鸟教程</h1><p>学的不仅是技术,更......