el-table el-table-column表头嵌套循环数据

需求:

不同以前 现在需要表头嵌套循环 以前只要

复制代码
 <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
    </el-table>
  </template>

 data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }]
        }
      }

现在需要表头嵌套循环:思路,两个数组,一个数组循环表格数据,一个循环表头

复制代码
<el-table
        ref="pageTable"
        :data="tableData"
        style="margin-top: 15px"
        height="548"
        :header-cell-style="cellStyleFun"
        id="out-table2"
      >
        <el-table-column
          fixed
          label="管辖单位"
          prop="C_NAME"
          :formatter="fmtTableProp"
          align="center"
          width="230"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              style="white-space: pre-wrap"
              @click="detailTree(scope.row)"
              >{{ scope.row.C_NAME }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          v-for="item in tableHeaderData" //单独循环表头-普通循环
          :key="item"
          :label="item"
          align="center"
          width="140"
        >
          <el-table-column
            label="登录次数"
            prop="LOGIN_COUNT"
            align="center"
            width="140"
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item].LOGIN_COUNT }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="检查次数"
            prop="CHECK_COUNT"
            align="center"
            width="140"
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item].CHECK_COUNT }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

js:
tableHeaderData: [], // 头部列表数据
tableData: [], // 列表数据

searchFun() {
      this.loading = true;
      const param = this.paramSet();
      workStatisticsByGx(param).then((data) => {
        this.loading = false;
        if (data.data && data.data.code == 10000) {
          this.tableHeaderData = data.data.otherObj;//表头时间
          this.tableData = data.data.obj;//表格数据
        } else {
          this.$confirm(data.data.message || "服务器忙", "提示", {
            type: "warning",
            center: true,
            customClass: "warn-dialog",
          })
            .then(() => {})
            .catch(() => {});
        }
      });
    },
相关推荐
铁皮饭盒1 小时前
Next.js 风格路由内置?Bun FileSystemRouter 凭啥这么香
javascript
乘风gg1 小时前
多 Agent 不是万能的!搞懂这 5 个原则,少走 1 年弯路!
前端·agent·ai编程
猩猩程序员1 小时前
Vercel 推出 Agent 框架 Eve:让 AI Agent 像写 Web 应用一样简单
前端
小林ixn2 小时前
别再背八股了!从 5 个真实场景彻底搞懂 JavaScript 的 this
javascript
爱读源码的大都督2 小时前
Claude Code源码分析(三):为什么系统提示词中需要有tools呢?
前端·人工智能·后端
爱勇宝2 小时前
Claude Code 被曝暗藏“隐形检测”代码:封代理不是最可怕的,可怕的是你根本不知道它在干什么
前端·后端·程序员
小牛不牛的程序员2 小时前
我用 Claude Code 半天撸完了一个完整网站,AI 编程到底提升了多少效率?
前端
东风破_2 小时前
JavaScript 面试常考的字符串算法:从反转字符串到回文判断
前端·javascript
巴勒个啦2 小时前
D3.js 入门实战:用力导向图可视化项目依赖关系
javascript
ITOM运维行者2 小时前
从零搭建企业级服务器监控体系:踩坑实录与架构设计
前端·后端