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 = [];
        }
});
相关推荐
Komorebi_999937 分钟前
前端开发|18 个高频易错知识点汇总(HTML+CSS+JS+Vue)面试 & 开发通用
javascript·css·html
账号已注销free1 小时前
Vue3 defineProps使用指南
vue.js
LIO1 小时前
Pinia 极简指南:Vue 3 官方状态管理库
前端·vue.js
Wenzar_1 小时前
# D3.js实战进阶:从基础图表到交互式数据仪表盘的全流程构建在现代前端开发中,**数据可视化已成为提升用户体验的核心能力之一
java·javascript·python·信息可视化·ux
菜鸟小码2 小时前
MapReduce 编程模型详解:Mapper、Reducer、Driver 三大核心组件
大数据·javascript·mapreduce
Ruihong2 小时前
手写 React 对比 VuReact 编译:真正省下来的是维护成本
vue.js·react.js·面试
林恒smileZAZ2 小时前
CSS 滚动驱动动画(scroll-timeline):无 JS 实现滚动特效
前端·javascript·css
俺不会敲代码啊啊啊2 小时前
el-table实现行拖拽(包含展开项)
前端·vue.js·typescript
架构源启2 小时前
2026 进阶篇:Spring Boot响应式编程 + Spring AI 1.1.4 流式实战 + Vue前端完整实现(避坑指南)
java·前端·vue.js·人工智能·spring boot·spring·ai编程
懒人村杂货铺2 小时前
Express + TypeScript 后端通用标准规范
javascript·typescript·express