使用vue+elementui封装table。
组件中提供了含有分页的表格,支持filter,支持render,支持按钮列(按钮可自定义不展示条件),展开行,合并单元格,支持点击行自定义事件,支持单元格内容超出宽度自动显示...。
使用的方式有两种:
①使用slot插槽自定义表格内容
②使用data和prop将表格内容传递到表格组件
下面给出合并单元格的代码,完整代码见:传送门
// 初始化需要合并的单元格
initMergeRow: function() {
if (this.mergeRowKeys.length === 0) {
return
}
this.mergeRowKeys.forEach((key) => {
const rowAndColumn = []
let pos = 0
for (var i = 0; i < this.data.length; i++) {
if (i === 0) {
// 如果是第一条记录(即索引是0的时候),向数组中加入1
rowAndColumn.push(1)
pos = 0
} else {
if (this.data[i][key] === this.data[i - 1][key]) {
// 如果属性值相等就累加,并且push 0
rowAndColumn[pos] += 1
rowAndColumn.push(0)
} else {
// 不相等push 1
rowAndColumn.push(1)
pos = i
}
}
}
this.multiColumnCount[key] = rowAndColumn
})
},
// 合并单元格函数
mergeRow: function({ row, column, rowIndex, columnIndex }) {
// 行合并
if (this.mergeRowKeys.includes(column.property)) {
if (this.multiColumnCount[column.property][rowIndex]) {
const rowNum = this.multiColumnCount[column.property][rowIndex]
return {
rowspan: rowNum,
colspan: rowNum > 0 ? 1 : 0
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
// 列合并
if (this.mergeColIndex && this.mergeColIndex.length > 0) {
var num = 1
// 当前列的index在columnList中对应的index值,如果表格还需要展示复选框,则需要将index 再 减去1
const notOperationIndex = this.columnList[this.columnList.length - 1].operations && this.columnList[this.columnList.length - 1].operations.length > 0 ? this.columnList.length - 2 : this.columnList.length - 1
const endIndex = this.mergeColIndex.length > 1 ? this.mergeColIndex[1] : notOperationIndex
// 如果当前列不在columnList中或者当前列超出了需合并列的index,则不进行任何操作
if (columnIndex < 0 || columnIndex > endIndex) {
return [1, 1]
}
// 如果当前列与前一列值相同,则进行合并,将单元格隐藏
if (columnIndex > 0 && row[this.columnList[columnIndex].prop] === row[this.columnList[columnIndex - 1].prop]) {
return [0, 0]
}
for (let i = columnIndex + 1; i <= endIndex; i++) {
// 若值与前一单元格值相等,则需合并单元格的值++
if (row[this.columnList[i].prop] === row[this.columnList[i - 1].prop]) {
num++
} else {
// 如果值不相等则返回合并单元格范围
return [1, num]
}
}
return [1, num]
}
},
使用方式请见github源码,传送门
顺便推一下typeScript版,刚开始学习ts,加油!传送门