资讯专栏INFORMATION COLUMN

vue elementUI table 自定义表头和行合并

funnyZhang / 2588人阅读

摘要:最近项目中做表格比较多,对表格的使用,只需要传递进去数据,然后写死表头即可渲染。该函数可以返回一个包含两个元素的数组,第一个元素代表,第二个元素代表。也可以返回一个键名为和的对象。

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

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

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

1、自定义表头

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


         
          
          

2、行合并

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

官方文档中有这个方法

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




    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就可以合并了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109744.html

相关文章

  • ElementUITable组件中的renderHeader方法研究

    摘要:难道是因为这个组件自带标签胡乱猜疑是解决不了问题的。为何称之为勉强版,因为从上面的也看出来了。再看数组第二个值,这便是一个完整的示例了。也希望能更加努力的学习和进步,更深的理解前端这门艺术 项目使用ElementUI,挺好用的,页面中有些地方的帮助提示通过使用组件Tooltip和el-icon-question来展示,代码如下: 本月累计收益 截图如下: sho...

    IntMain 评论0 收藏0
  • vue导入处理Excel表格功能步骤实例

      1. 前言  本篇文章就是为大家讲讲前端导入并处理excel表格的情况,顺便讲讲vue导入并处理excel数据;也总结下使用工具。  2.vue导入Excel表格  vue导入Excel表格主要有两种常用的方法,一个是借助ElementUI文件上传进行表格导入,另一个是自带的input做文件上传;以下对两个方法做详细介绍;  2.1 使用ElementUI中的upload组件  安装Eleme...

    3403771864 评论0 收藏0
  • 开发中遇到的问题总结

    摘要:获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

    wenshi11019 评论0 收藏0
  • 开发中遇到的问题总结

    摘要:获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

    Yuqi 评论0 收藏0
  • 开发中遇到的问题总结

    摘要:获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

    godlong_X 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<