element-ui表格合并span-method的实现方法


Posted in Javascript onMay 21, 2019

先看一下合并后的样式,表格第二行,二三四列合并

element-ui表格合并span-method的实现方法

官网给我们提供了span-method的方法可以进行表格合并,有4个参数返回:row,column,rowIndex,columnIndex;row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,rowIndex,columnIndex是当前行和列的序号

<el-table
:data="tableData6"
:span-method="arraySpanMethod"
border
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
sortable
label="数值 1">
</el-table-column>
<el-table-column
prop="amount2"
sortable
label="数值 2">
</el-table-column>
<el-table-column
prop="amount3"
sortable
label="数值 3">
</el-table-column>
<el-table-column
prop="amount4"
sortable
label="数值 4">
</el-table-column>
</el-table>
<script>
 export default {
  data() {
   return {



tableData6: [{




id: '12987122',




name: '王小虎',




amount1: '11',




amount2: '3.2',




amount3: 10,




amount4: 88



}, {




id: '12987123',




name: '王小虎',




amount1: '11',




amount2: '3.2',




amount3: 12,




amount4: 88



}, {




id: '12987124',




name: '王小虎',




amount1: '11',




amount2: '3.2',




amount3: 12,




amount4: 88



}, {




id: '12987125',




name: '王小虎',




amount1: '11',




amount2: '3.2',




amount3: 12,




amount4: 88



}, {




id: '12987126',




name: '王小虎',




amount1: '539',




amount2: '3.2',




amount3: 12,




amount4: 88



}]

   };
  },
  methods: {




/**
   * 表格合并
   * @param {*} param0
   * row 表格每一行的数据
   * column 表格每一列的数据
   * rowIndex 表格的行索引,不包括表头,从0开始
   * columnIndex 表格的列索引,从0开始
   */
  arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
   // console.log(row, column, rowIndex, columnIndex)
   // 打印出的数据就是表格当前行的数据,当前列的数据,索引
   if (rowIndex === 1) {
    // 合并第二行
    if (columnIndex === 1) {
     // 从第二列开始
     return [1, 3]
     // 这里返回的是行和列的合并数量,可以返回一个数组,也可以返回一个对象,效果一样
     // 这里rowspan为1是行有一行合并,colspan为3是列有3列合并,你要合并几行几列就写上相应的数字
     // return {
     //  rowspan: 1,
     //  colspan: 3
     // }
     // 这里要写一个else的判断,不然被合并列的原始数据会填充到合并之后的表格里
     // 这个判断是把合并的第3列,第4列的值省略,在合并的表格右边直接填原先第5列的值,合并了几列,就省略几列的值
    } else if (columnIndex === 2 || columnIndex === 3) {
     return [0, 0]
    }
   }
  }


</script>

再演示一下其他合并效果,第二行和第三行都有合并

element-ui表格合并span-method的实现方法

arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
   // console.log(row, column, rowIndex, columnIndex)
   // 打印出的数据就是表格当前行的数据,当前列的数据,索引
   if (rowIndex === 1 || rowIndex === 2) { // 在这里多加一个行的判断就行
    // 合并第二行
    if (columnIndex === 1) {
     // 从第二列开始
     return [1, 3]
     // 这里返回的是行和列的合并数量,可以返回一个数组,也可以返回一个对象,效果一样
     // 这里rowspan为1是行有一行合并,colspan为3是列有3列合并,你要合并几行几列就写上相应的数字
     // return {
     //  rowspan: 1,
     //  colspan: 3
     // }
     // 这里要写一个else的判断,不然被合并列的原始数据会填充到合并之后的表格里
     // 这个判断是把合并的第3列,第4列的值省略,在合并的表格右边直接填原先第5列的值,合并了几列,就省略几列的值
    } else if (columnIndex === 2 || columnIndex === 3) {
     return [0, 0]
    }
   }
  }

合并多行的情况

element-ui表格合并span-method的实现方法

arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
   if (rowIndex === 1) {
    // 合并第二行
    if (columnIndex === 1) {
     // 从第二列开始
     return [2, 3]
     // 这里返回的是行和列的合并数量,可以返回一个数组,也可以返回一个对象,效果一样
     // 这里rowspan为2是行有两行合并,colspan为3是列有3列合并,你要合并几行几列就写上相应的数字

     // 这个判断是把第一行的第3列,第4列的值省略,在合并的表格右边直接填原先第5列的值,合并了几列,就省略几列的值
    } else if (columnIndex === 2 || columnIndex === 3) {
     return [0, 0]
    }
   } else if (rowIndex === 2 && (columnIndex === 1 || columnIndex === 2 || columnIndex === 3)) {
    // 第二行的第2个数,第3个数,第4个数都要省略
    return [0, 0]
   }
  }

PS: 这里写的方法是基于数据确定的情况,如果数据是由后台返回的情况,可以看一下我整理的另一篇关于表格合并方法的补充,https://3water.com/article/161677.htm

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

Javascript 相关文章推荐
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 #Javascript
浅谈React Native 传参的几种方式(小结)
May 21 #Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 #Javascript
JS判断数组里是否有重复元素的方法小结
May 21 #Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 #Javascript
vue路由守卫+登录态管理实例分析
May 21 #Javascript
vue实现跨域的方法分析
May 21 #Javascript
You might like
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
Smarty3配置及入门语法
2017/02/22 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
学生实习自我鉴定
2013/10/11 职场文书
高中毕业生个人自我鉴定
2013/11/24 职场文书
护士自我评价范文
2014/01/25 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
大学校运会广播稿
2014/02/03 职场文书
遗嘱继承公证书
2014/04/09 职场文书
产假请假条
2014/04/10 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
2014年信用社工作总结
2014/11/25 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
单位病假条范文
2015/08/17 职场文书