elementui——表格的相同内容单元格合拼（合并）

2024年4月25日 181次阅读 来源: 小仙女de成长

如何实现相同内容的单元格合并？

:span-method=”objectSpanMethod”

定义一个空数组：[]

定义一个变量：0

遍历数据如果有相同数据 在空数组添加一个0(相同数据的起始位加1)，不相同在数据push 一个1（变量改成当前索引）

<html>
<el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>      
</el-table>
 
</html>
 
<script>
data(){
    return {
        tableData: [
            {id: "1",name:"小米"},
            {id: "1",name:"小名"},
            {id: "3",name:"小红"},
            {id: "3",name:"小棒"}
            {id: "2",name:"小李"}
        ],
        spanArr: []
    }
},
mounted(){
      let contactDot = 0;
        this.tableData.forEach( (item,index) => {
            if(index===0){
                this.spanArr.push(1)
            }else{
                if(item.id === this.tableData[index-1].id){
                    this.spanArr[contactDot] += 1;
                    this.spanArr.push(0)
                }else{
                    contactDot = index
                    this.spanArr.push(1)
                }
            }
        })
},
methods:{
    objectSpanMethod({row, column, rowIndex, columnIndex}){
        if(columnIndex ===0){
            if(this.spanArr[rowIndex]){
                return {
                    rowspan:this.spanArr[rowIndex],
                    colspan:1
                }
            }else{
                return {
                    rowspan: 0,
                    colspan: 0
                }
            }
        }
    }
}
 
</script>

 

    原文作者：小仙女de成长
    原文地址: https://blog.csdn.net/qq_32963841/article/details/116752957
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞