蚂蚁金服的design Vue表格动态合并

最新推荐文章于 2024-05-25 03:29:09 发布

ywh-愿来

最新推荐文章于 2024-05-25 03:29:09 发布

阅读量284

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/yh_hh/article/details/118610296

版权

你好！我们本次合并表格是实现的列合并 rowSpan
在上代码之前我们先讲一下表格
Ui框架：
1、Vue
2、Ant design Vue

表格：
1、行是 colSpan
2、列是 rowSpan
design 表格的title 是不计算索引的

最终效果

在这里插入图片描述

封装的合并方法

rowSpan(key) {
  // console.log(key, this.data)
  const arr = this.data
    .reduce((result, item) => {
      if (result.indexOf(item[key]) < 0) {
        result.push(item[key])
      }
      return result
    }, [])
    .reduce((result, keys) => {
      const children = this.data.filter(item => item[key] === keys)
      result = result.concat(
        children.map((item, index) => ({
          ...item,
          [`${key}RowSpan`]: index === 0 ? children.length : 0
        }))
      )
      return result
    }, [])
  console.log(arr)
  this.data = arr
},

从后端拿到数据后调取合并方法

    // 救助详情
    async _subsidyDetail(data) {
      let subsidyTypeList = []
      // console.log(data)
  this.activeId = data.id
  if (data.id === '') {
    subsidyTypeList = []
  } else {
    subsidyTypeList.push(data.id)
    if (data.childSubsidy) {
      data.childSubsidy.map(i => subsidyTypeList.push(i.id))
    }
  }
  const res = await subsidyDetail(subsidyTypeList)
  this.data = res.data
  // console.log(res)
  this.columns = [
    {
      title: '救助类型',
      dataIndex: 'subsidyParentType',
      key: 'subsidyParentType',
      customRender: (value, row, index) => {
        const obj = {
          children: value,
          attrs: {
            rowSpan: row.subsidyParentTypeRowSpan
          }
        }
        return obj
      }
    },
    {
      title: '救助子项',
      dataIndex: 'subsidyChildType',
      key: 'subsidyChildType',
      width: 150
    },
    {
      title: '救助内容',
      key: 'subsidyContent',
      dataIndex: 'subsidyContent'
      // scopedSlots: { customRender: 'isMatch' }
    },
    {
      title: '救助单位',
      key: 'subsidyDept',
      dataIndex: 'subsidyDept'
      // scopedSlots: { customRender: 'isMatch' }
    },
    {
      title: '惠及人次数(万人)',
      key: 'subsidyPerson',
      dataIndex: 'subsidyPerson',
      // scopedSlots: { customRender: 'isMatch' }
      customRender: (text, record, index) => {
        return text / 10000
      }
    },
    {
      title: '支出资金(万元)',
      key: 'subsidyMoney',
      dataIndex: 'subsidyMoney',
      customRender: (text, record, index) => {
        return text / 10000
      }
      // scopedSlots: { customRender: 'isMatch' }
    }
  ]
  this.rowSpan('subsidyParentType')
},