vue通过数据过滤实现表格合并

基于vue通过数据过滤实现表格合并,供大家参考,具体内容如下

需求

  • 基于vue渲染的数据表格
  • 需要对相同的列进行合并

思路

自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作。

要合并单元格需要用到rowspan属性,所有想法是针对数据添加rowspan属性使其多行显示,但下面的行再去渲染就重复了,所以用hidden 隐藏掉。

所以,针对每一行数据 ,用rowspan和display来控制每一个单元格的合并行数和是否显示

代码

<table id="search_table" class="table table-bordered table-striped" cellspacing="0" width="100%">
 <thead>
 <tr class="table_bg">
 <th class="" colspan="12">征期日历信息</th>
 </tr>
  <tr class="cell_bg">
  <th class="" style="">月份</th>
  <th class="" style="" >征期</th>
  <th class="" style="" >缴款期</th>
  <th class="" style="" >税种</th>
  </tr>
  </thead>
  <tbody id="tbody">

  <tr class="" v-for="(i,index) in result">
  <td :rowspan="i.ydspan" :class="{hidden: i.yddis}" class="text-center">
   {{i.yd}}
  </td>
  <td :rowspan="i.zqspan" :class="{hidden: i.zqdis}">
  {{i.zq}}
  </td>
  <td <%--:rowspan="i.jkqspan" :class="{hidden: i.jkqdis}"--%>>
  {{i.jkq}}
  </td>
  <td>
  {{i.sz}}
  </td>
  </tr>
 </tbody>
</table>

这里,对需要合并的单元格添加 :rowspan=”i.ydspan” :class=”{hidden: i.yddis}”

接着,设计一个算法,对用于渲染table渲染的数组,每个数据项添加两个属性,rowspan和hidden,计算出rowspan的值为 本列中该 值相同的行数,(当然,数据在sql中是经过group by的)以及依据rowspan的值计算hidden的值是否显示true/false,最后将此改变后的数组输出。

然而 ,需求是复杂的。

如图,要求第二列不能跨过第一列的维度合并,所以,没有办法一劳永逸,只能分别处理

先对月份处理,再对征期处理。

talk is cheap ,show you the code 。

号称是算法,就俩for 循环

combineZQ:function (list) {
 var k = 0;
 let field ="zq";
 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]['yd']==list[i]['yd']&&list[k]['yd']!='') {
    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;
},

名字是拼音没毛病,我也不想,人家大公司的规范(-,-)

combineYd:function (list) {
  var k = 0;
  let field ="yd";
  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;
},

然后。

这样就搞定了。

效果图: 这里前两列进行了合并

就是这样,by 一位即将成为 前端 的 后台程序员

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

(0)

相关推荐

  • vue.js实现表格合并示例代码

    前言 由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的.因此这个方法对所有数据驱动的框架都有效,比如说Angular和React. 最后的实现效果是这样的: 实现思路 原本的正常表格的代码长这样: <tr v-for="item in items"> <td width="3%">{{ $index + 1 }}</td> <td

  • Vue实现数据表格合并列rowspan效果

    背景 现实中会遇到很多需求,合并列,例如要显示一个名学生的各门课程成绩. html实现 使用html实现是比较简单的,利用table标签的rowspan属性即可,代码如下: <table> <thead> <tr> <th>姓名</th> <th>课程数</th> <th>课程名称</th> <th>成绩</th> </tr> </thead> <

  • vue通过数据过滤实现表格合并

    基于vue通过数据过滤实现表格合并,供大家参考,具体内容如下 需求 基于vue渲染的数据表格 需要对相同的列进行合并 思路 自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作. 要合并单元格需要用到rowspan属性,所有想法是针对数据添加rowspan属性使其多行显示,但下面的行再去渲染就重复了,所以用hidden 隐藏掉. 所以,针对每一行数据 ,用rowspan和display来控制每一个单元格的合并行数和是否显示 代码 <table id="search_tabl

  • vue实现表格合并功能

    本文实例为大家分享了vue实现表格合并功能的具体代码,供大家参考,具体内容如下 1.背景 本身有vue进行渲染的数据表格,,但是出于整体考虑,需要对相同的列信息进行单元格合并. 由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的.因此这个方法对所有 数据驱动的框架都有效,比如说Angular和React.最后的实现效果是这样的: 2.思路 原本的正常表格是这样的: <table > <thead&

  • Vue.js仿Metronic高级表格(二)数据渲染

    上篇使用Vue.js制作仿Metronic高级表格(一)静态设计介绍了需求.原型设计以及静态页面实现,这篇讲解如何使用Vue渲染数据,实现动态展示. 表格数据 先定义一个数组来保存所有数据: var vm = new Vue({ el:'#content', data: { book_list: [ {id:1, name:"标准日本语", type: "文化", price:19.00, time: 1492502043}, {id:2, name:"微

  • 详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

    之前写了一些关于element-ui表格合并的方法,不过用的数据都是确定的数据(死数据),但是很多时候我们的数据都是通过后台获得的,数据不稳定,这个时候使用表格合并就需要先处理一下数据,先看一下一种很常见的数据展示场景 直接上代码,HTML代码就不放了,都是差不多的,下面另一种场景有 // 模拟后台返回的值 getTable () { this.tableData = [{ id: 1, region: '中国', type: [{ sortName: '器械', sortList: [{ na

  • vue实现前台列表数据过滤搜索、分页效果

    本文实例为大家分享了vue实现列表数据过滤搜索.分页效果的具体代码,供大家参考,具体内容如下 job.vue页面 <style lang="scss"> .job-wrapper { padding-top: 50px; } .job-left { float: left; margin-right: 20px; padding: 20px; width: 310px; background: #fff; } .job-serach-title { margin: 8px

  • vue大数据表格卡顿问题的完美解决方案

    前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续优化,谢谢 先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿,而且每个单元格点击可以编辑,支持固定头和固定列 项目源代码地址 Github (本地下载) 解决问题核心点:横向滚动加载,竖向滚动加载 项目背景 笔者最

  • ant-design-vue动态表格合并案例

    目录 前言 数据格式 ant-desgin-vue表格提供的api 合并单元格算法实现 效果展示 前言 最近接到一个需求,要把后端传过来的数据动态展示在表格上面,并且支持前端筛选,相同数据进行单元格合并, 最终实现的效果如下: 数据格式 后端会返回给我们一个数组,数组的每一项格式是这样,在这个需求里,我们需要对 title,department,bugType 这三个字段相同的值的单元格进行合并 { fixCount: 0, id: 0, codeType: '新代码', bugType: 'u

  • Vue封装的可编辑表格插件方法

    可任意合并表头,实现单元格编辑. 页面效果如图: 页面使用如下: <template> <div> <v-table :datat = "tableData" :thlabel="thlabel" :isEdit="true"> </v-table> </div> </template> <script> export default{ data(){ retur

  • vue项目中将element-ui table表格写成组件的实现代码

    表格中我们经常需要动态加载数据, 如果有多个页面都需要用到表格, 那我希望可以有个组件, 只传数据过去显示, 不用每个页面都去写这么一段内容: <el-table :data="tableData" border size="mini" fit highlight-current-row height="500"> <el-table-column type="index" align="cente

随机推荐