element-ui 表格(table)合并表头下面合并列且可以收缩展开

百度了一大堆，发现了首行不能合并，想到了用dom做，找到了下面这个链接

要点记录：

1、表头合并 —— 给table添加属性:header-cell-style="headerStyle",里面给首行设置跨行

element-ui表头合并 - ^Mao^ - 博客园

2、表内合并 —— 给table添加属性:span-method="arraySpanMethod",里面设置合并

Element - The world's most popular Vue UI framework

3、表收缩 —— 给table添加属性:tree-props="childrenObj", 表示表格可展开,不要用原本的树形结构，因为我们有合并，直接用elementui自带的第一行合并带子级数据，展开后子级插在合并的中间，所以我们采用：合并的那一列标记有没有子级，合并的最后一列增加子级数据，自己做收缩展开功能

基于element-ui的table实现树级表格操作及单元格合并_trottoir的博客-CSDN博客

全部代码如下：

 // 表头跨列   
headerStyle({ row, column, rowIndex, columnIndex }) {// 1.1 让第0行的第0列跨2行if (rowIndex === 0 && columnIndex === 0) {this.$nextTick(() => {document.getElementsByClassName(column.id)[0].setAttribute('rowSpan', 2)return {}})}// 1.2 被覆盖的进行隐藏if (rowIndex === 1 && (columnIndex === 0 || columnIndex === 1)) {return {display: 'none'}}return {}},
// 合并表格arraySpanMethod({ row, columnIndex, rowIndex }) {// 合并第一列的两行if (columnIndex === 0) {if (rowIndex % 2 === 0) {return {rowspan: 2,colspan: 1}} else {return {rowspan: 0,colspan: 0}}}},
// 收缩展开方法toggleRowExpansion(row) {row.isExpand = !row.isExpandconst item = this.listAttr.find(i => {return i.centerId === row.centerId && i.cityCode === row.cityCode && i.index === row.index && i.type === 2})if (this.$refs.table) {this.$refs.table.toggleRowExpansion(item, row.isExpand)}},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！