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

最新推荐文章于 2024-08-12 14:03:04 发布

大海之恋88

最新推荐文章于 2024-08-12 14:03:04 发布

阅读量9.4k

点赞数 7

分类专栏： elementui 文章标签： elementui 表格相同值单元格合并

本文链接：https://blog.csdn.net/u013809856/article/details/82858495

版权

elementui 专栏收录该内容

2 篇文章 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===1){
                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>