view UI 表格合并问题解决

最近开发过程中遇到了单元格合并，现将经验分享一下。

组件库 View Ui 

组件库地址：http://v4.iviewui.com/components/table

先上原型图（数据就不上了）

上图中可以清晰的看到当前只有行合并（列合并没要求）

1-5 和 1-6 是自己添加的索引列

达成当前效果需要数据格式为：

data = {
  name: 'xxx', // 第一列名称
  idName: 'xxx', // 第二列名称
  childerList: [{},{},{}] // 表格主要渲染对象，用于判断合并以及添加序列号
}

 大致数据结构就是这个样子。下面详细讲解一下上述表格实现代码

<!-- html部分 -->
<!-- :span-method  4.0.0设置属性 span-method 可以指定合并行或列的算法。  -->
<Table :columns="columns" :data="dataList" border :span-method="handleSpan"></Table>


// js部分
data() {
 return {
 // columns 中的所有定义皆与合并无关
 columns: [
  {
    title:'系统',
    key:'sys',
    tooltip: true, // 开启后，文本将不换行，超出部分显示为省略号，并用 Tooltip 组件显示完整内容
    render: (h, params) => {  // 项目需要在表格中添加图片  所以使用自定义单元格  与合并行无关
       let that = this  // on 对象中的this 指向不是当前组件本身
       return h("div", { // 当前单元格替换为div
         style: {
            display: 'flex'
         }
       }, [
         h("span", params.row.sys),
         h("img", {
           attrs:{
             src: require("@/assets/xxx/png")， // 必须node引入文件方式, 
           },
           style: {},
           on: {
             click() {
                // 图片点击处理逻辑
             }
           }
         })
       ])
    }
  },
  {
    title:'权重',
    key: 'scroeWeight'
  },
  {
    title:'序号',
    key: 'index'
  },
  {
    title:'xxx',
    key: 'xxx'
  },
  {
    title:'xxx',
    key: 'xxx'
  },
  {
    title:'xxx',
    key: 'xxx'
  },
  {
    title:'xxx',
    key: 'xxx'
  }

],

dataList:[], // 表格数据数组
}
}

methods: {
    // data 为上图后端返回数据结构类型
    setDatalist(data) { // 因后台返回数据未告知行合并位数，故此，做合并前数据处理。数据格式ok的                请忽略这个功能函数
        let list = data.map(item => {
            if(item.childerList.length > 0) {
                return item.childerList.map((item1, index) => {
                    item1.index = index + 1 // 添加第三列序号数据
                    if(index === 0) {
                        item1.rowSpan = item.childerList.length // 添加合并到第几行（重要）
                    }
                })
            } else {
                // 不需要合并的处理
                item.rowSpan = 1
                item.index = 1
                return [item]
            }
        })
        this.dataList = list.flat(1) // 展开数组并赋值
    },
    // 合并单元格处理函数
    handleSpan({row,column,rowIndex,columnIndex}) {
        // 因为我只需要合并第一列和第二列，所以判断是否为 第一列  第二列
        if(columnIndex===0 || columnIndex===1){
            // 判断当前行是否有我添加的合并行属性， 有则进行合并
            if(row['rowSpan']) {
                return [row['rowSpan'], 1]

                // 也可写成对象写法
                // return {
                //       rowspan: row['rowSpan'],
                //       colspan: 1
                //    };
            } else {
                // 没有则表示当前为合并行，需返回0
                return [0, 0]
                // 也可写成对象写法
                // return {
                //       rowspan: 0,
                //       colspan: 0
                //    };
            }
        }
    }
}

合并行列最重要的就是:  span-method="handleSpan"方法了，当然，动态数据处理时应得知当前需要合并的行数，列数，在根据rowIndex和columnIndex进行判断，也可根据数据进行判断（目前没那种需求）。

今天就到这里了，自我收藏