el-table实现静态和动态合并单元格 以及内容显示的问题

实现效果图

css 复制代码
  <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        size="small"
      >
        <el-table-column fixed label="序号" width="50">
          <el-table-column align="center" width="50">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column fixed label="基本信息" width="420" align="center">
          <el-table-column label="项目" width="140" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.projectname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="职位" width="160" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.positionname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="120" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.saleusername }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          v-for="(
            item, index
          ) in projectBreakUpCpmmandList.projectBreakUpCpmmandList"
          :key="index"
          :label="item.months + '月'"
          align="center"
          show-overflow-tooltip
        >
          <el-table-column label="入住指标(人)" width="140" align="center">
            <template slot-scope="scope">{{
              scope.row.projectBreakUpCpmmandList[index].checkingoal
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="完成入住(人)"
            width="140"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.projectBreakUpCpmmandList[index].checkinfinish
            }}</template>
          </el-table-column>
          <el-table-column
            prop="zip"
            label="回款指标(万元)"
            width="140"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.projectBreakUpCpmmandList[index].backamountgoal
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="完成回款(万元)"
            width="140"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.projectBreakUpCpmmandList[index].backamountfinish
            }}</template></el-table-column
          >
          <el-table-column
            prop="zip"
            label="任务完成率"
            width="140"
            align="center"
            ><template slot-scope="scope">{{
              scope.row.projectBreakUpCpmmandList[index].finishrate
            }}</template></el-table-column
          >
        </el-table-column>
      </el-table>
css 复制代码
// 数据请求

getprojectbreakup(filteredFormInline).then((res) => {
        console.log(res);
        this.loading = false;
        if (res.data.length !== 0) {
          this.tableData = res.data;
          this.projectBreakUpCpmmandList = res.data[0];
        } else {
          this.tableData = [];
          this.projectBreakUpCpmmandList = [];
        }
});
相关推荐
customer084 分钟前
【开源免费】基于SpringBoot+Vue.JS安康旅游网站(JAVA毕业设计)
java·vue.js·spring boot·后端·kafka·开源·旅游
长风清留扬15 分钟前
小程序开发实战项目:构建简易待办事项列表
javascript·css·微信小程序·小程序·apache
程序员_三木16 分钟前
从 0 到 1 实现鼠标联动粒子动画
javascript·计算机外设·webgl·three.js
点点滴滴的记录21 分钟前
Java的CompletableFuture实现原理
java·开发语言·javascript
web Rookie34 分钟前
React 中 createContext 和 useContext 的深度应用与优化实战
前端·javascript·react.js
男孩1238 分钟前
react高阶组件及hooks
前端·javascript·react.js
跨境商城搭建开发2 小时前
一个服务器可以搭建几个网站?搭建一个网站的流程介绍
运维·服务器·前端·vue.js·mysql·npm·php
hhzz2 小时前
vue前端项目中实现电子签名功能(附完整源码)
前端·javascript·vue.js
秋雨凉人心2 小时前
上传npm包加强
开发语言·前端·javascript·webpack·npm·node.js
JoeChen.3 小时前
PostCSS插件——postcss-pxtorem结合动态调整rem实现字体自适应
javascript·ecmascript·postcss