Element中table组件按照属性执行合并操作详解
更新时间：2022年11月14日 08:50:54 作者：骑上我心爱的小摩托
在我们日常开发中，表格业务基本是必不可少的，对于老手来说确实简单，家常便饭罢了，但是对于新手小白如何最快上手搞定需求呢？本文从思路开始着手，帮你快速搞定表格
在实际开发中，要求使用elementUI的table组件对表格数据上下行相邻相同的数据进行合并，在elem官网上查看到是有对应的组件和合并方法
<el-table :data="tableData" :span-method="objectSpanMethod"> <el-table-column prop="id" label="ID" width="180"> </el-table-column> </el-table>
其中官网的objectSpanMethod比较简单，根据每隔两行就合并两行的数据，并不能满足实际的需求，下面直接上代码
1、首先需要生成一个与行数相同的数组，通过判断上下数据是否相同，记录每一行设置的合并数。这里以合并三列属性为例：
getSpanArr(data) {
this.spanArr = [];
this.spanCodeArr = [];
this.spanProxyArr = [];
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.spanCodeArr.push(1);
this.spanProxyArr.push(1);
this.pos = 0;
this.codePos = 0;
this.proxyPos = 0;
} else {
Object.keys(this.columns).forEach((item, index) => {
if (index === 0) {
if (data[i][item] === data[i - 1][item]) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
} else if (index === 1) {
if (data[i][item] === data[i - 1][item]) {
this.spanCodeArr[this.codePos] += 1;
this.spanCodeArr.push(0);
} else {
this.spanCodeArr.push(1);
this.codePos = i;
}
} else if (index === 2) {
if (data[i][item] === data[i - 1][item]) {
this.spanProxyArr[this.proxyPos] += 1;
this.spanProxyArr.push(0);
} else {
this.spanProxyArr.push(1);
this.proxyPos = i;
}
}
});
}
}
},其中 if (data[i][item] === data[i - 1][item]) {}这里就是判断当前元素与上一个元素是否相同
如果第一条记录索引为0，向数组中push 1，设置索引值
如果不是第一条记录，判断与前一条记录是否相等，相等则向对应的属性数组spanArr、spanCodeArr、spanProxyArr添加元素0
且将前一条记录+1，即需要合并的行数+1，直到得到所有需要合并的行数
2、官方介绍是通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if (columnIndex === 1) {
const _row = this.spanCodeArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if (columnIndex === 2) {
const _row = this.spanProxyArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
}
3、结合组件使用
<q-table
:data="tableData"
border
:span-method="objectSpanMethod"
height="400"
style="width: 100%">
<q-table-column v-for="(item,index) in Object.keys(columns)" :key="index"
:prop="item"
:label="columns[item]">
</q-table-column>
</q-table>
到此这篇关于Element中table组件按照属性执行合并操作详解的文章就介绍到这了,更多相关Element table组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇vue在路由中验证token是否存在的简单实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue 子组件使用 this.$parent 无法访问到父组件数据和方法(解决思路)
这篇文章主要介绍了Vue 子组件使用 this.$parent 无法访问到父组件数据和方法，解决思路也很简单，本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-07-07
Vue.js 3 和 Vue.js 2 是两个主要版本的流行前端框架,它们之间有很多区别,包括性能优化、新特性和改进的API等,下面就跟随小编一起来看看他们的使用区别吧2024-01-01
这篇文章主要为大家详细介绍了vue+antd实现折叠与展开组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要介绍了Vue实现双向绑定的原理以及响应式数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了Vue.js中NaiveUI组件文字渐变的实现，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
这篇文章主要给大家介绍了关于vue项目中向数组添加元素的3种方式,在Vue中添加元素到数组非常简单,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-10-10
这篇文章主要为大家介绍了vue 项目优雅的对url参数加密详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了vue vue-touch移动端手势详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
网页中滑动图片验证一直是各大网站、移动端的主流校验方式，其主要作用是为了区分人和机器以及为了防止机器人程序暴力登录或攻击从而设置的一种安全保护方式，这篇文章主要介绍了vue 实现左滑图片验证,需要的朋友可以参考下2023-04-04
最新评论