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 = [];
        }
});
相关推荐
掘金安东尼几秒前
CSS 颜色混乱实验
前端·javascript·github
前端码农.5 分钟前
Element Plus 数字输入框箭头隐藏方案
前端·vue.js
Mintopia22 分钟前
轻量化AIGC模型在移动端Web应用的适配技术
前端·javascript·aigc
Mintopia22 分钟前
Next.js CI/CD 基础(GitHub Actions)
前端·javascript·next.js
小朋友,你是否有很多问号?1 小时前
Spark10- RDD转DataFrame的三种方式
大数据·javascript·spark
掘金安东尼2 小时前
为什么浏览器要限制 JavaScript 定时器?
前端·javascript·github
学前端搞口饭吃2 小时前
react context如何使用
前端·javascript·react.js
GDAL2 小时前
为什么Cesium不使用vue或者react,而是 保留 Knockout
前端·vue.js·react.js
芜青2 小时前
【Vue2手录11】Vue脚手架(@vue_cli)详解(环境搭建+项目开发示例)
前端·javascript·vue.js
麦麦大数据3 小时前
J002 Vue+SpringBoot电影推荐可视化系统|双协同过滤推荐算法评论情感分析spark数据分析|配套文档1.34万字
vue.js·spring boot·数据分析·spark·可视化·推荐算法