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 相关文章推荐
Script标签与访问HTML页面详解
Jan 10 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
详解VUE调用本地json的使用方法
May 15 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
JavaScript函数柯里化
Nov 07 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一些公用函数的集合
2008/03/27 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python开发之thread实现布朗运动的方法
2015/11/11 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
python selenium操作cookie的实现
2020/03/18 Python
python模拟斗地主发牌
2020/04/22 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
能源工程专业应届生求职信
2014/03/01 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
小学生评语集锦
2014/04/18 职场文书
党课心得体会范文
2014/09/09 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
Apache POI的基本使用详解
2021/11/07 Servers