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

funnyZhang 发布于2019-08-26 13:53 / 2732人阅读

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

最近项目中做表格比较多，对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//合并的列数，设为０则直接不显示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

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

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

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

ElementUI的Table组件中的renderHeader方法研究

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

IntMain 2019-08-23 11:55 评论0 收藏0
vue导入处理Excel表格功能步骤实例

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

3403771864 2022-11-29 09:16 评论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 2019-08-23 16:03 评论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 2019-08-30 15:56 评论0 收藏0