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 版本自动生成文章摘要
Jul 23 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
浅析vue component 组件使用
Mar 06 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
react组件基本用法示例小结
Apr 27 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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
重置版宣传动画
2020/04/09 魔兽争霸
php5.2.0内存管理改进
2007/01/22 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
php实现的双色球算法示例
2017/06/20 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
VSCode搭建Vue项目的方法
2020/04/30 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
python机器学习实战之树回归详解
2017/12/20 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
Django model update的多种用法介绍
2020/03/28 Python
python如何支持并发方法详解
2020/07/25 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
聘任书模板
2014/03/29 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
教师节领导致辞
2015/07/29 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL