vue实现表格合并功能


Posted in Vue.js onDecember 01, 2020

本文实例为大家分享了vue实现表格合并功能的具体代码,供大家参考,具体内容如下

1、背景

本身有vue进行渲染的数据表格,,但是出于整体考虑,需要对相同的列信息进行单元格合并。

由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的。因此这个方法对所有
数据驱动的框架都有效,比如说Angular和React。最后的实现效果是这样的:

vue实现表格合并功能

2、思路

原本的正常表格是这样的:

<table >
      <thead>
        <tr>
          <th>设备</th>
          <th>工单</th>
          <th>产品型号</th>
          <th>计划/实际</th>
          <th>状态</th>
          <th>预计生产数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in testData">
          <td>{{ item.equipmentName }}</td>
          <td>{{ item.doCode}}</td>
          <td>{{ item.materialCode}}</td>
          <td>{{ item.productionNum}}</td>
          <td>{{ item.status}}</td>
          <td>{{ item.pNum}}</td>
        </tr>
      </tbody>
</table>

先拿正常的表格来做测试,原生的<td>标签就有rowspan属性支持单元格行合并,属性值指的是向下合并多少行,其实就相当于在本行中向下又添加了几个单元格。

因为,如果接下来的一行还会渲染的话就会被挤下去,因此,下面被合并的单元格要隐藏掉,通过display: none;css控制即可。

因此,每个<td>标签需要带有两个属性值,rowspan和display来控制每一个单元格的合并行数和是否显示。代码变成这样了

<table >
      <thead>
        <tr>
          <th>设备</th>
          <th>工单</th>
          <th>产品型号</th>
          <th>计划/实际</th>
          <th>状态</th>
          <th>预计生产数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in testData">
          <td :rowspan="item.equipmentNamespan" :class="{hidden: item.equipmentNamedis}">{{ item.equipmentName }}</td>
          <td :rowspan="item.doCodespan" :class="{hidden: item.doCodedis}">{{ item.doCode}}</td>
          <td :rowspan="item.materialCodespan" :class="{hidden: item.materialCodedis}">{{ item.materialCode}}</td>
          <td :rowspan="item.productionNumspan" :class="{hidden: item.productionNumdis}">{{ item.productionNum}}</td>
          <td :rowspan="item.statusspan" :class="{hidden: item.statusdis}">{{ item.status}}</td>
          <td :rowspan="item.pNumspan" :class="{hidden: item.pNumdis}">{{ item.pNum}}</td>
        </tr>
      </tbody>
</table>

其中,这两个属性有一些特征:

要显示的单元格rowspan为>1的值,记录接下来的行数
要显示的单元格display为true
接下来不显示的单元格rowspan为1且display为false
只有一行数据的单元格rowspan为1且display为true
实际上就是设计一个算法,对于输入的表格数组,每个数据项添加两个属性,rowspan和display,并且计算出**rowspan的值为
本列中以下相同值的行数,以及依据rowspan的值计算display的值是否显示**,最后将此改变后的数组输出。

3、code

function combineCell(list) {
  for (field in list[0]) {
    var k = 0;
    while (k < list.length) {
      list[k][field + 'span'] = 1;
      list[k][field + 'dis'] = false;
      for (var i = k + 1; i <= list.length - 1; i++) {
        if (list[k][field] == list[i][field] && list[k][field] != '') {
          list[k][field + 'span']++;
          list[k][field + 'dis'] = false;
          list[i][field + 'span'] = 1;
          list[i][field + 'dis'] = true;
        } else {
          break;
        }
      }
      k = i;
    }
  }
  return list;
}

4 写在最后

代码实际上很短很简单,主要借助的是kmp的思想,定义一个指针k,开始指向第一个值,然后向下比较,以此对rowspan和display设置,若遇到不相同的值则判断为跳出,进行下一个循环,通知指针k加上这个过程中运算的行数,进行跳转,然后比较下一个单元格的值,和kmp的指针跳转判断相同字符串一样的原理。

通过combineCell()这个函数就可以将网络请求回来的数据进行过滤,附加上相应的值后再对vue监视的数组进行赋值操作就可以了。

实际上此方法不仅适用于vue,数据驱动的框架都可以,包括Angular和React,要想实现表格合并,对请求回来的值过滤一下就OK。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
vue element实现表格合并行数据
Nov 30 #Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 #Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 #Vue.js
详解Vue 的异常处理机制
Nov 30 #Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 #Vue.js
Vue用mixin合并重复代码的实现
Nov 27 #Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 #Vue.js
You might like
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
python使用pil生成缩略图的方法
2015/03/26 Python
Python heapq使用详解及实例代码
2017/01/25 Python
Python读写zip压缩文件的方法
2018/08/29 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
Python 切分数组实例解析
2019/11/07 Python
python 实现list或string按指定分段
2019/12/25 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
ET Mall东森购物网:东森严选
2017/03/06 全球购物
市场安全管理制度
2014/01/26 职场文书
慈善晚会策划方案
2014/05/14 职场文书
高考标语大全
2014/06/05 职场文书
领导欢迎词致辞
2015/01/23 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
详解JavaScript中Arguments对象用途
2021/08/30 Javascript