Vue + Element-ui 实现table表格数据相同项合并

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象

  data() {return {tableArr: [],  //定义空数组，作为临时存储每一行已处理的数据pos:0, //}}

 :span-method="SpanMethod" //Element-ui  table表格的属性 ,例： <el-table :span-method="SpanMethod" ></el-table>

//获取数据，并对数据进行处理for (var i = 0; i < data.length; i++) {if (i === 0) {this.tableArr.push(1);this.pos = 0;} else {// 判断当前元素与上一个元素是否相同if (data[i].DEPT_NAME === data[i - 1].DEPT_NAME) {this.tableArr[this.pos] += 1;//判断当前行与上一行内容相同时 返回0 ，0 意味消除 ， 即不显示 this.tableArr.push(0);} else {this.tableArr.push(1);this.pos = i;}}}

实现合并相同项，

   objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) { //第一列const _row = this.tableArr[rowIndex];const _col = _row > 0 ? 1 : 0;// console.log(`rowspan:${_row} colspan:${_col}`);return {// [0,0] 表示这一行不显示， [2,1]表示行的合并数rowspan: _row,colspan: _col,};}},

当需要合并的列数不止第一列时

我这里只能分开写，写在一起的想法也尝试过

  data() {return {//用了两个临时数组tableArr: [],  //定义空数组，作为临时存储每一行已处理的数据spanArr:[],pos:0, //}}

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

columnIndex 为你需要合并的那一列，而我只需一，二列，按需使用

   objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) { //第一列const _row = this.tableArr[rowIndex];const _col = _row > 0 ? 1 : 0;// console.log(`rowspan:${_row} colspan:${_col}`);return {// [0,0] 表示这一行不显示， [2,1]表示行的合并数rowspan: _row,colspan: _col,};}if (columnIndex === 1) { //第二列const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;// console.log(`rowspan:${_row} colspan:${_col}`);return {// [0,0] 表示这一行不显示， [2,1]表示行的合并数rowspan: _row,colspan: _col,};}},

代码有点冗余，但我还没有更好的解决办法
如有更好，也可让我也学习学习呀。

Vue + Element-ui 实现table表格数据相同项合并相关推荐

Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
vue+element UI的 table组件实现日历
有现成的日历插件但是不符合需求,所以项目中使用vue+element 的表格组件自己实现一个日历组件核心js部分:此部分为计算的当月的日期且包含是否可选,是否节假日等等可操作的标记,这部分基本是实现 ...
vue+element ui实现树形表格加复选框（checkbox）
element ui中有带复选框的表格和树形数据的表格,不过呢,wo遇到一个新的需求,其中就是要实现树形表格和复选框的结合,尝试过很多方法,最后自己总结出一套,实现了全选,单选,多选. 效果图: 代码 ...
element ui的table表格因竖向滚动条导致表头错位问题解决
在vue项目中引入table组件,当将表格高度固定出现竖向滚动条,而且横向滚动条滚到最右边时,就会出现表头与内容错位的问题,如图解决方法: Step1:在app.vue中加入css样式 <st ...
Vue element怎么获取table表格当前行数据和索引值
怎么拿表格当前行数据平时我们在使用表格时通过template的slot-scope="scope",使用scope.row拿到当前行的数据 <el-table max-he ...
Element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...
Element UI 之table表格的封装
需求: 鼠标移入: 实现: <template><el-tableclass="table-list":data="tableData"hei ...
闲云旅游网04（基于vue+element ui）完成机票数据列表渲染
机票列表页渲染列表数据项目GitHub地址:https://github.com/q2419068625/xianyun 1.请求接口数据 <template><section ...
vue + element UI中国省市区级联数据
安装 npm install element-china-area-data -S 使用 import { provinceAndCityData, regionData, provinceAndCi ...

Vue + Element-ui 实现table表格数据相同项合并

Vue + Element-ui 实现table表格数据相同项合并

当需要合并的列数不止第一列时

Vue + Element-ui 实现table表格数据相同项合并相关推荐

最新文章

热门文章

Vue + Element-ui 实现table表格 数据相同项合并

Vue + Element-ui 实现table表格 数据相同项合并

当需要合并的列数不止第一列时

Vue + Element-ui 实现table表格 数据相同项合并相关推荐

最新文章

热门文章

Vue + Element-ui 实现table表格数据相同项合并

Vue + Element-ui 实现table表格数据相同项合并

Vue + Element-ui 实现table表格数据相同项合并相关推荐