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

vue+elementUI 合并行3

时间:2023-06-03 10:03:00浏览次数:47  
标签:vue return elementUI 合并 list item props row

1、返回数据为一维数组

getData() {
 that.tableData = res.data.data.list;
}

2、合并函数

挂在vue底层:
Vue.prototype.$spanMethodFunc=function(list, props, row, col) 
写在method内:
spanMethodFunc(list, props, row, col) {
      if (col >= props.length || !props[col]) {
        // console.log(123)
        // 根据传入的字段列表,判断不需要合并的列
        return [1, 1];
      } else {
        //使用try-catch,如果方法错误返回错误信息
        try {
          let _props = props.slice(0, col + 1); //截取需要用到判断的字段名
          // 判断是否从本行开始合并
          let merge = _props.some(item => {
            // console.log(list[row])

            // 如果当前行所需要判断合并的字段中有一个跟前一条数据不一样,本条数据即为合并的起点,第一条数据直接为合并起点
            return row == 0 || (item && list[row][item] != list[row - 1][item]);
          });
          // 如果本条数据是合并起点,获取需要合并的数据条数
          // console.log(merge)
          if (merge) {
            let _list = list.slice(row); //截取从本条数据开始的列表
            // 获取合并行数
            let _lineNum = _list.findIndex((item, ind) => {
              //同merge判断,找到合并的终点
              return (
                ind &&
                _props.some(item1 => {
                  return item1 && item[item1] != _list[0][item1];
                })
              );
            });
            // 合并行数为-1时,输出_list的长度,否则输出_lineNum
            return [_lineNum === -1 ? _list.length : _lineNum, 1];
          } else {
            // 否则,返回[0,0],即本条数据被合并
            return [0, 0];
          }
        } catch (err) {
          // 打印报错
          console.error("spanMethodFunc error:", err);
        }
      }
    },

  3、调用合并

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let propSpan = [
        "id",
        "company",
        "contractId"
      ];
//例如:[“id”,“”“contractId”] return this.spanMethodFunc( this.tableData, propSpan, rowIndex, columnIndex ); },

 

标签:vue,return,elementUI,合并,list,item,props,row
From: https://www.cnblogs.com/shirley-csdn/p/17453345.html

相关文章

  • Vue进阶(幺零八):npm run build 错误 (node:7852) UnhandledPromiseRejectionWarning: Cs
    (文章目录)一、前言在项目打包过程中,突然报如下错误:Vuenpmrunbuild错误(node:7852)UnhandledPromiseRejectionWarning:CssSyntaxError:xxxx.但是在执行npmrundev过程中,并未错误或告警信息。二、解决方案打开webpack.prod.conf.js,注释掉以下配置代码newOptimiz......
  • vue+elemntUI合并行2
    返回的是一维数组o:[{id:1,name:s;age:11},{id:1,name:s;age:11},{id:2,name:p;age:15}]1、对返回的数据做处理getData(){that.tableData=res.data.data.list;that.getFormatList();//重新合并行},getFormatList(){letrecordObj={};this.re......
  • Vue路由,子路由,动态路由,动态路由参数,路由查询参数
    一、路由、子路由、动态路由子路由、动态路由类似,不同的是子路由同时有路由跳转和页面跳转的,动态路由只有路由跳转,没有页面跳转举例如下:/customerHome 下有 item1 和 item2 两个子路由。import{createRouter,createMemoryHistory,RouteRecordRaw}from'vue-router'......
  • vue 浏览器调试 定位具体行数
    module.exports={lintOnSave:false,devServer:{//开发环境下设置为编译好以后直接打开浏览器浏览open:true,},configureWebpack:(config)=>{//调试JSconfig.devtool="eval-source-map"},css:{//查看CSS属于哪个css文件......
  • vue+elementui 合并行
    1,数据格式是二维的如:o:{id:123,prams:{name:aaa,age:11}}的对象第一步:先获取返回的数据为indexInfoList,遍历转化为一维数组 that.indexInfoList.forEach(ele => {if(ele.prams.length>=1){ele.prams.map((related,index)=>{......
  • 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.事件......