ant-design-vue表格合并行

2年前 (2022) 程序员胖胖胖虎阿
192 0 0
columns: [
  { title: 'xxx', dataIndex: 'xxx', align: 'center', customRender: renderContent }
],
// 合并行
mergeRow () {
  var colTemp = {}
  this.dataSource.map((item, index) => {
    var key = `${item.riskName}:${item.riskDes}:${item.riskPlrLevel}`
    if (colTemp[key]) {
      col1.forEach(col => {
        if (col.val === key) {
          col.len++
        }
      })
    } else {
      colTemp[key] = 1
      col1.push({
        idx: index,
        val: `${item.riskName}:${item.riskDes}:${item.riskPlrLevel}`,
        len: 1
      })
    }
  })
},
// 合并行
var col1 = []
const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    attrs: {}
  }
  var key = `${row.riskName}:${row.riskDes}:${row.riskPlrLevel}`
  col1.forEach(col => {
    if (col.val === key) {
      if (col.idx === index) {
        obj.attrs.rowSpan = col.len
      } else {
        obj.attrs.rowSpan = 0
      }
    }
  })
  return obj
}
版权声明:程序员胖胖胖虎阿 发表于 2022年10月7日 下午12:24。
转载请注明:ant-design-vue表格合并行 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...