iview表格动态数据实现合并功能

摘要:
需求原型:代码实现:html part:从'../../libs/c导入{MsgType,PublicType}

需求原型:

  iview表格动态数据实现合并功能第1张

代码实现:

html部分:

<Row>
                <Col span="24">
                    <Table   stripe border :columns="columns1" :data="formData.dataTable" :span-method="handleSpan"></Table>
                </Col>
            </Row>

      
    import {MsgType, PublicType } from '../../libs/constants';
 
      //data函数
      data(){
            return {
                loadingShow:false, //页面加载loading效果
                title:'考核指标设置', //表头名字
                formData:{
                    dataTable:[]
                }, //表单信息
                columns1: [ //表头
                    {key: 'contentType',170,
                        renderHeader: (h, params) => {
                            return h('span', [
                                h('em', {
                                    style:{
                                        'color':'red'
                                    },
                                }, '* '),
                                h('span', {
                                }, '考核内容')
                            ]);
                        },
                    },
                    {key: 'indexName',170,
                        renderHeader: (h, params) => {
                            return h('span', [
                                h('em', {
                                    style:{
                                        'color':'red'
                                    },
                                }, '* '),
                                h('span', {
                                }, '考评指标')
                            ]);
                        },
                    },
                    {key: 'scoreRatio',100,
                        renderHeader: (h, params) => {
                            return h('span', [
                                h('em', {
                                    style:{
                                        'color':'red'
                                    },
                                }, '* '),
                                h('span', {
                                }, '权重(%)')
                            ]);
                        },
                    },
                    {key: 'evalPoint',
                        renderHeader: (h, params) => {
                            return h('span', [
                                h('em', {
                                    style:{
                                        'color':'red'
                                    },
                                }, '* '),
                                h('span', {
                                }, '考评要点级标准')
                            ]);
                        },
                    },
                    {title: '是否直接取值',key: 'isFetch',140,
                        render:(h,params)=>{
                            let isFetch = params.row.isFetch
                            if(isFetch == 'Y'){
                                return h('span',{
                                },'是');
                            }else if(isFetch == 'N'){
                                return h('span',{
                                },'否');
                            }
                        }
                    },
                    {title: '排序',key: 'showOrder', 80}
                ],
                spanArr:[],// 合并单元格
            }
        },
methods中的方法:
      //获取详情数据
            getDetatil(id){
                let data={
                    id:id
                };
                this.loadingShow = true;
                this.$api.evalTargetSetting.getDetailData(data).then(res=>{
                    if(res.result == MsgType.SUCCESS){
                        let list = res.resultData || {};
                        this.formData = list;
                        this.title = list.evalName;
                        this.formData.createDate = this.$moment(list.createDate).format("YYYY-MM-DD HH:mm:ss");
                        this.formData.dataTable = list.evaluationIndexDetailList;
                        this.spanArr = PublicType.getMergeNum(list.evaluationIndexDetailList,'contentType');
                    }
                    this.loadingShow = false;
                }).catch(error=>{
                    this.loadingShow = false;
                })
            },
            //合并单元格
            //row: 当前行
            // column: 当前列
            // rowIndex: 当前行索引
            // columnIndex: 当前列索引
            handleSpan({ row, column, rowIndex, columnIndex }){
                if (columnIndex === 0) {
                // 二维数组存储的数据 取出
                const _row = this.spanArr[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
                //不可以return {rowspan:0, colspan: 0} 会造成数据不渲染, 也可以不写else,eslint过不了的话就返回false
                } else {
                    return false
                }
            },

constants.js文件中的 getMergeNum方法:

/*合并单元格
  data:数据列表
  contentType:将要合并的对比字段
  */
  getMergeNum (data, contentType){
    //页面展示的数据,不一定是全部的数据,所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱
    let spanArr = []
    let pos = 0
    //遍历数据
    data.forEach((item, index) => {
      //判断是否是第一项
      if (index === 0) {
        spanArr.push(1)
        pos = 0
      } else {
        //不是第一项时,就根据标识去存储
        if (data[index][contentType] === data[index-1][contentType]) {
          // 查找到符合条件的数据时每次要把之前存储的数据+1
          spanArr[pos] += 1
          spanArr.push(0)
        } else {
          // 没有符合的数据时,要记住当前的index
          spanArr.push(1)
          pos = index
        }
      }
     })
    return spanArr  
  },

免责声明:文章转载自《iview表格动态数据实现合并功能》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇backgroundsizeMySQL学习笔记:字符串前后补全0下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue中promise的使用

vue中promise的使用 promise是处理异步的利器,在之前的文章《ES6之promise》中,我详细介绍了promise的使用, 在文章《js动画实现&&回调地狱&&promise》中也提到了promise的then的链式调用, 这篇文章主要是介绍在实际项目中关于异步我遇到的一些问题以及解决方法,由此来加深对pro...

AFNetWorking 上传功能使用及源码分析

使用方法比较多,这里列举两种: 第一种: // 1. 使用AFHTTPSessionManager的接口 AFHTTPSessionManager *manager = [AFHTTPSessionManager manager]; [manager POST:@"http://123.123.123.1" parameters:...

python安装 hanlp +使用 坑坑坑。。。填填填。。。

刚开始用都不知道要怎么安装,包括什么文件。百度了下发现正常安装就可以用,不用下多余的东西,但是但是但是但是但是但是但是但是 用pycharm安装不行,pip安装不行,也是见鬼了。 解决方法: 1、手动安装JPype1 pip install D:softJPype1-0.6.2-cp36-cp36m-win_amd64.whl 这个安装包可以在这里下 ...

『MXNet』第八弹_数据处理API_下_Image IO专题

想学习MXNet的同学建议看一看这位博主的博客,受益良多。 在本节中,我们将学习如何在MXNet中预处理和加载图像数据。 在MXNet中加载图像数据有4种方式。 使用 mx.image.imdecode 加载原始数据文件 使用在Python中实现的mx.img.ImageIter ,很方便自定义。 它可以从.rec(RecordIO)文件和原始图像文件读...

jQuery多图上传Uploadify插件使用及传参详解

因为工作需要,这两天接触到了Uploadify插件,由于是第一次用,花了我近一天的时间。下面我把我在用这个插件过程详细的分享出来,也让自己巩固一下,也希望能帮助到你。 所需文件: jquery-1.8.2.min.js (可以低版本)uploadify.cssswfobject.js uploadify.swfjquery.uploadify.js upl...

转载:嵌入式C语言面试题(二)

BSS段 是“Block Started by Symbol”的缩写,意为“以符号开始的块”。   BSS是Unix链接器产生的未初始化数据段。其他的段分别是包含程序代码的“text”段和包含已初始化数据的“data”段。BSS段的变量只有名称和大小却没有值。此名后来被许多文件格式使用,包括PE。“以符号开始的块”指的是编译器处理未初始化数据的地方。BS...