这期内容当中小编将会给大家带来有关使用element怎么合并单元格,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
主要思路:
对数据进行处理,写了一个getSpanData通用方法。
用api中提供的span-method方法。
span-method方法用法:
通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
通用实例
demo.vue
<el-table v-loading="loading" ref="singleTable" :data="tableData" :span-method="handleObjectSpanMethod" highlight-current-row border max-height="730" >
JavaScript
// 查询列表 queryTableList() { getNeeds().then(res => { if (res.code === 0) { // 表格数据 this.tableData = res.data // 对表格数据进行处理,找出需要合并的单元格 this.getSpanData(this.tableData) } }) }, // 计算需要合并的单元格 getSpanData(data) { // 存放计算好的合并单元格的规则 this.spanData = [] for (var i = 0; i < data.length; i++) { if (i === 0) { this.spanData.push(1) this.pos = 0 } else { // 判断当前元素与上一个元素是否相同 if (data[i].realOpenDate === data[i - 1].realOpenDate) { this.spanData[this.pos] += 1 this.spanData.push(0) } else { this.spanData.push(1) this.pos = i } } } } // 合并单元格 handleObjectSpanMethod({ row, column, rowIndex, columnIndex }) { // 需要合并的列 // [0, 1, 2].includes(columnIndex ), 表示合并前三列 if (columnIndex === 1) { const _row = this.spanData[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } }
getSpanData中spanData处理后的结构:
上述就是小编为大家分享的使用element怎么合并单元格了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前名称:使用element怎么合并单元格-创新互联
URL标题:https://www.cdcxhl.com/article46/dojehg.html
成都网站建设公司_创新互联,为您提供网站维护、建站公司、域名注册、自适应网站、响应式网站、微信公众号
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联