elementUI 表格合并处理

渲染表格给的数据是这样的

        "rows": [
            {
                "id": 1,
                "gradeName": "测试数据1",
                "type": 1,
                "status": 0,
                "state": 1,
                "enterprise": 1,
                "enterpriseName": "企业名称",
                "sign": 1,
                "apply": 1,
                "proDefault": 1,
                "addTime": "2020-11-27",
                "addUser": 1,
                "items": [
                    {
                        "id": 1,
                        "gradeName": "重要的",
                        "levelId": 1,
                        "retime": 2.0,
                        "comtime": 5.0
                    },
                    {
                        "id": 2,
                        "gradeName": "非重要的",
                        "levelId": 1,
                        "retime": 3.0,
                        "comtime": 5.0
                    }
                ]
            }
        ]

1. 这种表格用根据给的数据用elementUI的合并行或者和并列处理起来比较繁琐，所以就简单粗暴用改表格的样式来实现这种合并
    

等级列表格渲染处理

 <el-table-column label="工单等级" show-overflow-tooltip>
    <template slot-scope="scope">
          <div class="grade" v-for="(i,k) in scope.row.items":key="k">
                {{i.gradeName}}
          </div>
     </template>
 </el-table-column>

表格css处理（强制改变样式）

 
/deep/ .el-table td {
     padding: 0px;
 }

/deep/ .el-table .cell {
    padding: 0px;
}

完美实现想要的结构，啦啦

 

 

交流
1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解 群号: 856402057

2、公众号：公众号「进军全栈攻城狮」

对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上，共勉