Element table各种合并单元格

一、表头合并列

这是官网合并列效果，可是，并不适用于只有一级表头的，官方文档并未发现直接实现属性

一级表头合并实现方式：给table加 header-cell-style，代码如下

<el-table :data="tableData" border fit :header-cell-style="discountHeaderStyle"> <el-table-column label="操作" align="center"><el-table-column align="center" width="160" fixed="right"><template slot-scope="scope"><div>               <el-button size="mini" type="success" plain>查看</el-button><el-button type="primary" size="mini" plain>回复</el-button></div></template></el-table-column><el-table-column align="center" width="110" fixed="right"><template slot-scope="scope"><div><el-button type="warning" size="mini" plain>取消订单</el-button></div></template></el-table-column>  </el-table-column>
</el-table>

discountHeaderStyle({ row, column, rowIndex, columnIndex }) {if (rowIndex === 1) {      //隐藏另外领两个头部单元格                       return { display: 'none' }}
},

下面是效果

注意

这样会有个问题，本来最后两列是加了 fixed=“right” 属性固定在右侧的，当合并头部时，这个属性不起作用，如果加在父级el-table-column上，最后两列直接乱掉……不知道怎么兼容，所以我把定位给去了

二、表内容合并行

<el-table:data="tableData"borderfit:span-method="objectSpanMethod"style="width: 100%"
>...</el-table>

//加载列表
initList() {//此处axios请求数据省略this.tableData = data.listthis.getSpanArr(this.tableData)
}
//合并单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0||columnIndex===14) { // 对第一列进行合并const _row = this.spanArr[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}
},
//筛选需要合并单元格的数据
getSpanArr(data) {this.spanArr = [] // 避免表格错乱！data.forEach((item, index) => {if (index === 0) {this.spanArr.push(1)this.position = 0} else {if (data[index].orderId === data[index - 1].orderId) { // 这里是要合并行this.spanArr[this.position] += 1this.spanArr.push(0)} else {this.spanArr.push(1)this.position = index}}})
},

效果如下

Element table各种合并单元格相关推荐

html table 合并单元格分页,element table组件合并单元格
合并单元格,如果situation 一致,则合并 getSpanArr(data)方法 data就是我们从后台拿到的数据,通常是一个数组:spanArr是一个空的数组,用于存放每一行记录的合并数:po ...
VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
Ant Design Vue Table 组件合并单元格
Ant Design Vue Table 组件合并单元格项目开发中,有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现. <template><div ...
HTML5 table表格合并单元格和合并边框
原文地址和代码: 原文地址转载请备注代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
html语言的td合并,table标签合并单元格（包括行和列的合并）的方法
刘代码已经在table标签的使用方法中介绍过该标签的一些具体用法,但这次,我们要讲解的是如何合并table表格中的单元格,包括行的合并以及列的合并方法 table表格单元格的合并,主要分为两种:跨行合 ...
Ant table表格合并单元格使用
Ant 合并单元格+覆盖样式项目需求: 最后一列用来展示详情,表格左侧点击行切换:要求选中行的样式和详情信息用一个边框凸显出来结果如下: 切换效果展示如下: 实现过程: 在ant合并单元格demo ...
react ，ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
table合并单元格_element ui el-table 合并单元格
element ui table 的合并单元格或者测试 vue 文件 <template><div><el-table:data="tableData&qu ...
table合并单元格宽度自适应
table中合并单元格导致的css样式不同处理方式: 1.每行都拆成一个table. 2.多设置几个单元格的宽度(自适应失效.第一列都设置宽度也有可能失效).

Element table各种合并单元格

一、表头合并列

注意

二、表内容合并行

Element table各种合并单元格相关推荐

最新文章

热门文章