antd+vue table表格-合并列
antd+vue table表格-合并列查了好多网页方法都报错,才知道我用错了,记录一下:columns要在data()里面定义,如果在外面const后会报错,取不到list数据/*** @param text 当前单元格的值* @param array 当前分页所有数据* @param columns 当前列的dataIndex* @returns {number} 待合并单元格数量*/cons
·
antd+vue table表格-合并列
查了好多网页方法都报错,才知道我用错了,记录一下:
columns要在data()里面定义,如果在外面const后会报错,取不到list数据
/**
* @param text 当前单元格的值
* @param array 当前分页所有数据
* @param columns 当前列的dataIndex
* @returns {number} 待合并单元格数量
*/
const temp = {} // 当前重复的值,支持多列
const mergeCells = (text, array, columns) => {
let rowSpan = 0
if(array.length == 1){
rowSpan = 1
}else{
if (text !== temp[columns]) {
temp[columns] = text
array.forEach((item,index,arr) => {
if (item.projectName === temp[columns]) {
rowSpan ++
}
})
}
}
return rowSpan
}
export default {
data() {
columns : [
{
title: '序号',
align: 'center',
customRender: (text, record, index) => index + 1
},
{
title: '项目名称',
dataIndex: 'projectName',
customRender: (text, record, index) => {
const obj = {
children: text,
attrs: {}
}
obj.attrs.rowSpan = mergeCells(text, this.data, 'projectName')
return obj
}
},
{
title: '文件名称',
dataIndex: 'fileName',
scopedSlots: {customRender: 'fileName'},
},
]
},
};
效果图
2021-01-27 已更新
更多推荐
已为社区贡献1条内容
所有评论(0)