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博客

全部代码如下：

<el-tablev-if="!listLoading"ref="table":data="listAttr"fitstripe:height="height":tree-props="childrenObj":header-cell-style="headerStyle"class="width-per-100 margin-top-10":span-method="arraySpanMethod":row-key="getRowKey"><el-table-column align="center" width="250" label="地区及急救分中心"><el-table-column min-width="170" align="left"><template slot-scope="scope"><span v-if="scope.row.hasChildren" class="arrow-icon" @click="toggleRowExpansion(scope.row)"><i :class="scope.row.isExpand ? 'el-icon-caret-bottom' : 'el-icon-caret-right'" /></span><span>{{ scope.row.name | noDataFilterLine }}</span></template></el-table-column><el-table-column min-width="70" align="center"><template slot-scope="scope">{{ scope.row.type === 1 ? '呼入量' : '出车量' }}</template></el-table-column></el-table-column><el-table-columnv-for="(item, index) in tableLabelList":key="index"align="center":label="item"min-width="80"><template slot-scope="scope">{{ scope.row.list[index] }}</template></el-table-column></el-table>

 // 表头跨列
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)}},

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

Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
element ui 的table的表头和表格没对齐
在 app.vue的style里面加上 /* 解决element-ui的table表格控件表头与内容列不对齐问题 */.el-table th.gutter{display: table-cell!i ...
element ui中table合并相同内容单元格
一.遍历需要合并的集合,定义spanArr数组二.在table中增加事件三.调用objectSpanMethod方法,合并单元格
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
Element UI动态生成多级表头
1 基础常用的原型样例我们常常遇到的情况就是表头固定的,我们需要从后端获取对应表头的信息,如果信息比较多的时候为了方便我们展示,可以固定表头和列,下面是一个我们常见的例子: 固定列和表头可以同时使用 ...

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

要点记录：

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

最新文章

热门文章