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 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
Angularjs 基础入门
Dec 26 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
详解关于表格合并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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
Jquery性能优化详解
2014/05/15 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
python比较2个xml内容的方法
2015/05/11 Python
python编程嵌套函数实例代码
2018/02/11 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python学生信息管理系统(初级版)
2018/10/17 Python
python 格式化输出百分号的方法
2019/01/20 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
基于python代码批量处理图片resize
2020/06/04 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
化工专业推荐信范文
2013/11/28 职场文书
企业军训感言
2014/02/08 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python