关于el-table的合并单元格
(常规的 纵向合并和野路子横向合并 外加表头合并)
表格大概长这样 ↑
通过给table 传入span-method方法可能实现合并行或列 方法的参数可以是一个对象,
里面包含
四个属性
该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan 第二个元素代表colspan 也可以返回一个键名为rowspan和colspan的对象
(这段话是在哪抄的被我摘到笔记里了)
后台给的数据格式:
this.dataList = [
{
mergetype: 1 // 是否向下合并的标识,
type: '企业规划',
merge: '大型企业',
column: '2023',
products: '',
remark: ''
}
]
DATA:
data() {
return {
dataList: [],
rowList: [],
spanArr: [],
position: 0
}
}
el-table的重点方法
<el-table
:span-method="arraySpanMethod"
:span-style="headMerge"
:cell-style="changeCellStyle"
:cell-class-name="addClass">
</el-talbe>
获取数据后执行rowspan()方法
// 纵向相同项合并
rowspan() {
this.dataList.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1)
this.postion = 0
} else {
if (this.dataList[index].mergetype === this.dataList[ index-1 ].mergetype) {
this.spanArr[this.position] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.position = index
}
})
}
表格合并单元格
arraySpanMethod({ 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.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
表头合并
headMerge({ row, column, rowIndex, columnIndex }) {
if ( rowIndex === 1 ) {
if (columnIndex === 0 || columnIndex === 1) {
return { display: 'none'}
}
if ( rowIndex === 0 ) {
if (columnIndex === 0) {
this.$nextTIck(() => {
if (document.getElementByClassName(colum.in).length ! == 0 ) {
document.getElementByClassName(column.id)[0].setAttribute('rowSpan', 3)
return false
}
})
return column
}
}
}
}
野路子:隐藏需要横向合并的中间线
(我实在不知道该咋横向合并 网上也没搜着 激灵一动 寻思着 要不把这条线藏起来吧!)
changeCellStyle({ row, column, rowIndex, columnIndex }) {
if ( this.dataList[rowIndex].column == this.dataList[rowIndex].merge && columnIndex == 2 ) {
return 'border-right: none'
}
if (this.dataList[rowIndex].merge == ' ' && columnIndex == 2) {
return 'border-rgiht: none'
}
}
横向合并 数值居中
(上面虽然把线隐藏了 但是数值是歪歪的 所以给个样式调调)
addClass({ row, column, rowIndex, columnIndex }) {
if (this.dataList[rowIndex].merge == ' ' && columnIndex == 3) { // 表格中第四列的下标是3
return 'mergingCenter' // 这是个类名
}
}
注意需使用全局属性:
在elementUI中
row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效
因为之前的代码都是在组件中编写的, 所以上面的