element-ui table span-method(行合并)的实现代码

2024-10-20 09:32:05

element-ui官网中关于行合并的例子是根据行号进行合并的，这显然不符合我们日常开发需求，因为通常我们table中的数据都是动态生成的，所以需要做一些修改。我们首先解读一下官网实例中的各参数的意义：

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {  //用于设置要合并的列
     if (rowIndex % 2 === 0) {  //用于设置合并开始的行号
      return {
       rowspan: 2,　　　　　//合并的行数
       colspan: 1     //合并的列数，设为０则直接不显示
      };
     } else {
      return {
       rowspan: 0,
       colspan: 0
      };
     }
    }
   }

研究这个例子后不难发现，实现合并行的方法其实在每一行数据渲染的时候都会执行，只不过在渲染过程中我们设置了它合并的行数和列数，以得到不同的效果。所以我们需要生成一个与行数相同的数组记录每一行设置的合并数。处理过程如下：

getSpanArr(data) {　
 for (var i = 0; i < data.length; i++) {
    if (i === 0) {
       this.spanArr.push(1);
       this.pos = 0
    } else {
     // 判断当前元素与上一个元素是否相同
  if (data[i].name === data[i - 1].name) {
        this.spanArr[this.pos] += 1;
        this.spanArr.push(0);
       } else {
        this.spanArr.push(1);
        this.pos = i;
       }
    }
  }
},

data就是我们从后台拿到的数据，通常是一个数组；spanArr是一个空的数组，用于存放每一行记录的合并数；pos是spanArr的索引。上述代码意思是：如果是第一条记录（索引为０），向数组中加入１，并设置索引位置；如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，则向spanArr中添入元素０，并将前一位元素＋１，表示合并行数＋１，以此往复，得到所有行的合并数，０即表示该行不显示。

cellMerge({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) {
      const _row = this.spanArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
         rowspan: _row,
         colspan: _col
      }
   }
},

然后根据得到的数组spanArr对表格进行合并渲染，并绑定合并方法

<el-table
   border
   :data="tableData"
   style="width: 100%;max-height: 160px;overflow: auto"
   :span-method="cellMerge">
  ......
</el-table>

效果图如下：

注：后台获取数据的时候根据要在前台进行合并的字段进行排序，使要合并的字段值相同的记录依次相邻。

合并多行的情况

arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
   if (rowIndex === 1) {
    // 合并第二行
    if (columnIndex === 1) {
     // 从第二列开始
     return [2, 3]
     // 这里返回的是行和列的合并数量,可以返回一个数组,也可以返回一个对象,效果一样
     // 这里rowspan为2是行有两行合并,colspan为3是列有3列合并,你要合并几行几列就写上相应的数字

     // 这个判断是把第一行的第3列,第4列的值省略,在合并的表格右边直接填原先第5列的值,合并了几列,就省略几列的值
    } else if (columnIndex === 2 || columnIndex === 3) {
     return [0, 0]
    }
   } else if (rowIndex === 2 && (columnIndex === 1 || columnIndex === 2 || columnIndex === 3)) {
    // 第二行的第2个数,第3个数,第4个数都要省略
    return [0, 0]
   }
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

VUE element-ui 写个复用Table组件的示例代码

饿了么的table组件功能很强大,对于项目中的各种表格基本够用,但是--个人对于它以列为单位的操作不习惯 =.=所以改成了另一种方式(我不会告诉你其实本质没变). 项目中表格较多,所以复用性最重要步骤一先来个基本的表格展示官例的tableData tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address:
Element-ui table中过滤条件变更表格内容的方法

组件中: <el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;"> <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sorta
基于Vue+element-ui 的Table二次封装的实现

本人第一次写这个写的不好还望指出来作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员 ! 公司做的数据管理系统所以离不开表格了然后表格样式统一啥的就想到封装一个element-ui 里面的table+Pagination了效果图表格组件的引入与使用 <com-table title="监测数据" v-model="tableData4" @selection-change="handleSelectionChange&q
详解使用element-ui table组件的筛选功能的一个小坑

使用element-ui table组件的筛选功能的一个小坑使用自定义模板和筛选功能,一开始的代码 <el-table-column v-if="key==='isShow'" label="是否在发现页展示" :filters="[{text:'已展示',value: true},{text: '未展示', value: false}]" :filter-method="filterShow"> <tem
详解VUE 对element-ui中的ElTableColumn扩展

公司有一个新的需求,点击ElTableColumn的头部可以进行搜索,这个功能同事已经做出来了,但是使用有些不方便,自己就打算封装成一个组件,学习一下. ElTableColumn本来是这个样子的: 要做成的是这个样子: 我直接就放代码了,挨着挨着说明太多了. 代码的结构: 组件  <template> <el-table-column v-if="visible" :formatter="
vue element-ui table表格滚动加载方法

添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.
Element-UI Table组件上添加列拖拽效果实现方法

Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup 事件来修改删减 dom 节点但 Vue 是一个数据驱动的前端框架,开发时应尽量避免操作 dom 而且 Element-UI 的 Table 组件封装得很严谨,直接操作 dom 很容易产生不可预计的 bug 所以我的核心思路就是:通过一个数组渲染表头(列),然后修改这个数组的顺序,从而修改列表的列
element-ui 中的table的列隐藏问题解决

element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条还有一段距离.所以希望能够切换到简短列可以方便的看见比较重要的几列的内容.用之前的方法<bootstrap>的话,非常简单,直接设置display的显示和隐藏就可以了. 但是放在element-ui中来就不可行了.每一列根本不能直接设置样式,你给每一列设置class-name从而设置样式的话,可能
vue elementUI table 自定义表头和行合并的实例代码

最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染表头. 而官方例子都是写死表头,那么为了满足项目需求,只能自己来研究一下. 1.自定义表头代码如下,其实就是分了两部分,表格主数据是在TableData对象中,表头的数据保存在headerDatas,headerDatas.label其实就是表头的值,如果表头是"序号",那么header
关于Element UI table 顺序拖动方式

目录 Element UI table 顺序拖动基本使用 element关于table拖拽排序问题 Element UI table 顺序拖动使用Sortable.js插件.对element-ui中的el-table进行拖拽行排序. new Sortable(example1, { animation: 150, ghostClass: 'blue-background-class' }); 官网: [1] Sortable.js官网配置项说明等 [2] Sortable更多使用示例基本使
vuejs+element UI table表格中实现禁用部分复选框的方法

有时候我们构建这样带一列复选框的表格然后希望根据条件禁用某个列表项的选择框,可以这样写 HTML: JS: 以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
使用 Element UI Table 的 slot-scope方法

在 Element UI Table 的官网上,有一个"筛选"功能,里面可以利用 slot-scope,给表格记录打标签. 关键代码为: <template slot-scope="scope"> <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag>
Element UI table参数中的selectable的使用及遇到坑

Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="selection" :reserve-selection="true"> </el-table-column> 网上搜了说这样: selectable(row,index) { if(row.id==="10001"){ return fal
Vue + Element UI 实现权限管理系统之菜单功能实现代码

目录菜单功能实现菜单接口封装菜单管理界面测试效果源码下载菜单功能实现菜单接口封装菜单管理是一个对菜单树结构的增删改查操作. 提供一个菜单查询接口,查询整颗菜单树形结构. http/modules/menu.js 添加findMenuTree 接口. import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', m
element ui table（表格）实现点击一行展开功能

前言 element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击右箭头可以展开,我们的很多需求是点击某一行展开那是不是无法实现呢?其实,借助element ui的一些属性,轻松实现点击某行展开,我们还是用2.0.9版本官网的例子, 对齐改造,使之可以做到这点 <template> <el-table :data="tableData5&
element-ui table span-method(行合并)的实现代码

element-ui官网中关于行合并的例子是根据行号进行合并的,这显然不符合我们日常开发需求,因为通常我们table中的数据都是动态生成的,所以需要做一些修改.我们首先解读一下官网实例中的各参数的意义: objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { //用于设置要合并的列 if (rowIndex % 2 === 0) { //用于设置合并开始的行号 return { row
element ui table 增加筛选的方法示例

网上大部分都可以增加筛选功能,但没有找到下列这种情况. 若表头数据较多,而表头是自己通过v-for循环产生,这种情况怎么给虚拟dom添加筛选规则. <el-table-column v-for="item in tableHead" :key="item.id" :prop="item.id" :label="item.label" :filters="item.filter" :filter-met
Js获取table当前tr行的值的代码

下面的代码主要是学习控制表格里面的一些操作,代码都是直接写在表格里面的, 大家可以改成事件绑定的. Js获取 table当前行的值 var selectedTr=null; function c1(obj){ obj.style.backgroundColor='blue'; //把点到的那一行变希望的颜色; if(selectedTr!=null) selectedTr.style.removeAttribute("backgroundColor"); if(selectedTr==

element-ui table span-method(行合并)的实现代码

相关推荐

随机推荐