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 var变量隐式声明方法
Oct 19 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
js实现导航跟随效果
Nov 17 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 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
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
详解js类型判断
2018/05/22 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python正则简单实例分析
2017/03/21 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
pandas 数据类型转换的实现
2020/12/29 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
求职信模板怎么做
2014/01/26 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书