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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
jquery编写日期选择器
Mar 16 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 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
实用函数7
2007/11/08 PHP
PHP教程 变量定义
2009/10/23 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
浅析Python中的join()方法的使用
2015/05/19 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
opencv实现简单人脸识别
2021/02/19 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
个人自我鉴定写法
2013/11/30 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
追悼会上的答谢词
2014/01/10 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
安全标准化实施方案
2014/02/20 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
西柏坡导游词
2015/02/05 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书