vue elementUI table 自定义表头和行合并的实例代码


Posted in Javascript onMay 22, 2019

最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染。

但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能。这个时候需要动态渲染表头。

而官方例子都是写死表头,那么为了满足项目需求,只能自己来研究一下。

1、自定义表头

代码如下,其实就是分了两部分,表格主数据是在TableData对象中,表头的数据保存在headerDatas,headerDatas.label其实就是表头的值,如果表头是“序号”,那么headerDatas.label="序号",在TableData中构建TableData[序号]= 1 这样的map对象,就可以动态渲染出想要的表格

<el-table
     :data="TableData"
     :height="tableHeight"
     :row-class-name="showEmergencyLine"
     border
     element-loading-spinner="el-icon-loading"
     element-loading-text="拼命加载中"
     @selection-change="handleSelectionChange"
     v-loading.lock="TableLoading"
     @header-dragend="changeHeaderWidth"
    >
     <el-table-column
      v-for="header in headerDatas"
      :prop="header.type"
      :key="header.label"
      :label="header.label"
      :width="header.width"
      :minWidth="header.minWidth"
      :itemname="header.mid"
      :align="header.align"
      header-align="center"
     >
     <template slot-scope="scope">
     <div
      v-else
     >{{scope.row[scope.column.property]}}</div>
     </template>
     </el-table-column>
</el-table>

2、行合并

在项目中,有些表格常常会有像下面这样的需求,一行合并后面几行,那么这个怎么处理呢

 vue elementUI table 自定义表头和行合并的实例代码

官方文档中有这个方法

 vue elementUI table 自定义表头和行合并的实例代码

通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

 vue elementUI table 自定义表头和行合并的实例代码

<el-table
   :data="tableData"
   :span-method="objectSpanMethod"
   highlight-current-row
   element-loading-spinner="el-icon-loading"
   element-loading-text="拼命加载中"
   v-loading.lock="mainTableLoading"
   border
   style="width: 100%; margin-top: 25px"
  >
</el-table>

  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    if (rowIndex % 2 === 0) {//偶数行
     if (columnIndex === 0) {//第一列
      return [1, 2];//1合并一行,2占两行
     } else if (columnIndex === 1) {//第二列
      return [0, 0];//0合并0行,0占0行
     }
    }
   },

   objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
     if (rowIndex % 2 === 0) {
      return {
       rowspan: 2,//合并的行数
       colspan: 1//合并的列数,设为0则直接不显示
      };
     } else {
      return {
       rowspan: 0,
       colspan: 0
      };
     }
    }
   }

这里面可以通过对rowIndex,columnIndex根据自己的要求作一些条件判断,然后返回rowspan,colspan就可以合并了。

总结

以上所述是小编给大家介绍的vue elementUI table 自定义表头和行合并的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
vue params、query传参使用详解
Sep 12 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
vue实现分页加载效果
Dec 24 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 #Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 #Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 #Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 #Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 #Javascript
JavaScript中的 new 命令
May 22 #Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 #Javascript
You might like
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
PHP调用其他文件中的类
2018/04/02 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python自动生产表情包
2017/03/17 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
python中的随机函数random的用法示例
2018/01/27 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
绿色学校实施方案
2014/03/31 职场文书
亲子活动总结
2014/04/26 职场文书
竞选班委演讲稿
2014/04/28 职场文书
关于学习的演讲稿
2014/05/10 职场文书
英语专业求职信
2014/07/08 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL
JavaScript异步操作中串行和并行
2021/11/20 Javascript