美文网首页
vue+element ui table表格合并相同行

vue+element ui table表格合并相同行

作者: Gifted_ | 来源:发表于2022-11-28 14:45 被阅读0次

    方法封装

    function merge(data, key) {
      const newData = data.map((item, index) => {
        const filterData = data.filter(ele => {
          return item[key] == ele[key]
        })
        const index_ = data.findIndex(ele => {
          return item[key] == ele[key]
        })
        if (index == index_) {
          item.rowspan = filterData.length
        } else {
          item.rowspan = 0
        }
        return item
      })
      return newData
    }
    
    function arraySpanMethod({ row, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        }
      }
    }
    

    方法调用

    const tableData = merge(props.listdata, "STNM")
    
    <el-table :data="tableData":span-method="arraySpanMethod" ></el-table>
    

    相关文章

      网友评论

          本文标题:vue+element ui table表格合并相同行

          本文链接:https://www.haomeiwen.com/subject/sevktdtx.html