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

系统管理员 2023-01-20 14:54 355阅读 0赞

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

: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>