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

需求原型：

　　

 

 

 

代码实现：

html部分：

<Row>
                <Col span="24">
                    <Table id="tab" 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',width:170,
                        renderHeader: (h, params) => {
                            return h('span', [
                                h('em', {
                                    style:{
                                        'color':'red'
                                    },
                                }, '* '),
                                h('span', {
                                }, '考核内容')
                            ]);
                        },
                    },
                    {key: 'indexName',width:170,
                        renderHeader: (h, params) => {
                            return h('span', [
                                h('em', {
                                    style:{
                                        'color':'red'
                                    },
                                }, '* '),
                                h('span', {
                                }, '考评指标')
                            ]);
                        },
                    },
                    {key: 'scoreRatio',width: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',width: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',width: 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  
  },

 

posted @ 2021-03-04 15:31  博客家园－晨  阅读(1904)  评论(1)  编辑  收藏  举报