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 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
js实现自定义进度条效果
Mar 15 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
JS回调函数深入理解
Oct 16 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
PHP模块memcached使用指南
2014/12/08 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
Python的Django框架中的数据过滤功能
2015/07/17 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
求职简历中个人的自我评价
2013/12/01 职场文书
行政部主管岗位职责
2013/12/28 职场文书
低碳环保标语
2014/06/12 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
工作简报怎么写
2015/07/21 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏