二级表头渲染

最新推荐文章于 2025-02-26 10:32:45 发布
原创 最新推荐文章于 2025-02-26 10:32:45 发布 · 314 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

二级表格展示
在这里插入图片描述

//第一版所有数据通过后端反馈
<template>
  <el-table v-loading="loading" :data="tableData" border style="width: 100%" row-key="id">
    <el-table-column align="center" fixed type="index" label="序号" width="50" />
    <el-table-column align="center" fixed prop="lineCode" label="产线编号" width="100" />
    <el-table-column align="center" fixed prop="lineName" label="产线名称" width="100" />
    <el-table-column
      v-for="(planItem, index) in planList"
      :key="index"
      align="center"
      :label="`${planItem.weekName}(${planItem.startTime}/${planItem.endTime})`"
    >
      <el-table-column
        v-for="(stageItem, indexChild) in planItem.stageList"
        :key="index + '-' + indexChild"
        align="center"
        :label="stageItem.stageLable"
        width="150"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.planList[index].stageList[indexChild].value }}</span>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // 表格组件 列表数据对象
      tableData: [],
      planList: []
    }
  },
  created() {
    this.initData()
  },

  methods: {
    initData() {
      this.getList()
    },
    getList() {
      const list = [
        {
          id: '123',
          lineCode: 'CX000001',
          lineName: '产线1',
          planList: [
            {
              weekName: '第一周',
              startTime: '2021-01-01',
              endTime: '2021-01-02',
              stageList: [
                { stageLable: '计划数量（万片）', value: '100' },
                { stageLable: '完成数量（万片）', value: '200' },
                { stageLable: '差异数量（万片）', value: '300' },
                { stageLable: '完成率（%）', value: '400' }
              ]
            },
            {
              weekName: '第二周',
              startTime: '2021-01-03',
              endTime: '2021-01-09',
              stageList: [
                { stageLable: '计划数量（万片）', value: '10' },
                { stageLable: '完成数量（万片）', value: '20' },
                { stageLable: '差异数量（万片）', value: '30' },
                { stageLable: '完成率（%）', value: '40' }
              ]
            },
            {
              weekName: '第三周',
              startTime: '2021-01-10',
              endTime: '2021-01-16',
              stageList: [
                { stageLable: '计划数量（万片）', value: '1000' },
                { stageLable: '完成数量（万片）', value: '2000' },
                { stageLable: '差异数量（万片）', value: '3000' },
                { stageLable: '完成率（%）', value: '4000' }
              ]
            }
          ]
        },
        {
          id: '456',
          lineCode: 'CX000002',
          lineName: '产线2',
          planList: [
            {
              weekName: '第一周',
              startTime: '2021-01-01',
              endTime: '2021-01-02',
              stageList: [
                { stageLable: '计划数量（万片）', value: '1001' },
                { stageLable: '完成数量（万片）', value: '2001' },
                { stageLable: '差异数量（万片）', value: '3001' },
                { stageLable: '完成率（%）', value: '4001' }
              ]
            },
            {
              weekName: '第二周',
              startTime: '2021-01-03',
              endTime: '2021-01-09',
              stageList: [
                { stageLable: '计划数量（万片）', value: '101' },
                { stageLable: '完成数量（万片）', value: '201' },
                { stageLable: '差异数量（万片）', value: '301' },
                { stageLable: '完成率（%）', value: '401' }
              ]
            },
            {
              weekName: '第三周',
              startTime: '2021-01-10',
              endTime: '2021-01-16',
              stageList: [
                { stageLable: '计划数量（万片）', value: '10' },
                { stageLable: '完成数量（万片）', value: '200' },
                { stageLable: '差异数量（万片）', value: '300' },
                { stageLable: '完成率（%）', value: '400' }
              ]
            }
          ]
        }
      ]
      //   拿到列表数据
      this.tableData = list
      this.planList = (list[0] && list[0]['planList']) || []
    }
  }
}
</script>

第二版 将二级表头固定,通过<template slot-scope='{row}'> row.planList[index]渲染对应的值
<template>
  <el-table v-loading="loading" :data="tableData" border style="width: 100%" row-key="id">
    <el-table-column align="center" fixed type="index" label="序号" width="50" />
    <el-table-column align="center" fixed prop="lineCode" label="产线编号" width="100" />
    <el-table-column align="center" fixed prop="lineName" label="产线名称" width="100" />
    <el-table-column
      v-for="(planItem, index) in planList"
      :key="index"
      align="center"
      :label="`${planItem.weekName}(${planItem.startTime}/${planItem.endTime})`"
    >
      <el-table-column label="计划数量（万片）" min-width="160">
        <template slot-scope="{ row }">
            <span>{{ row.planList[index].planNums }}</span>
        </template>
      </el-table-column>
      <el-table-column label="完成数量（万片）" min-width="160">
        <template slot-scope="{ row }">
             <span>{{ row.planList[index].completeNums }}</span>
        </template>
      </el-table-column>
      <el-table-column label="差异数量（万片）" min-width="160">
        <template slot-scope="{ row }">
            <span>{{ row.planList[index].differenceNums }}</span>
        </template>
      </el-table-column>
      <el-table-column label="完成率（%）" min-width="160">
        <template slot-scope="{ row }">
            <span>{{ row.planList[index].percentageComplete }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        v-for="(item, el) in planItem.stageList"
        :key="index + '-' + el"
        align="center"
        :label="item.stageLable"
        width="150"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.planList[index].stageList[el].value }}</span>
        </template>
      </el-table-column> -->
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // 表格组件 列表数据对象
      tableData: [],
      planList: []
   }
  },
  created() {
    this.initData()
  },

  methods: {
    initData() {
      this.getList()
    },
    getList() {
      const list = [
        {
          id: '123',
          lineCode: 'CX000001',
          lineName: '产线1',
          planList: [
            {
              weekName: '第一周',
              startTime: '2021-01-01',
              endTime: '2021-01-02',
              planNums: 20,
              completeNums: 30,
              differenceNums: 10,
              percentageComplete: 130
              // stageList: [
              //   { stageLable: '计划数量（万片）', value: '100' },
              //   { stageLable: '完成数量（万片）', value: '200' },
              //   { stageLable: '差异数量（万片）', value: '300' },
              //   { stageLable: '完成率（%）', value: '400' }
              // ]
            },
            {
              weekName: '第二周',
              startTime: '2021-01-03',
              endTime: '2021-01-09',
              planNums: 20,
              completeNums: 30,
              differenceNums: 10,
              percentageComplete: 130
              // stageList: [
              //   { stageLable: '计划数量（万片）', value: '10' },
              //   { stageLable: '完成数量（万片）', value: '20' },
              //   { stageLable: '差异数量（万片）', value: '30' },
              //   { stageLable: '完成率（%）', value: '40' }
              // ]
            },
            {
              weekName: '第三周',
              startTime: '2021-01-10',
              endTime: '2021-01-16',
              planNums: 20,
              completeNums: 30,
              differenceNums: 10,
              percentageComplete: 130
              // stageList: [
              //   { stageLable: '计划数量（万片）', value: '1000' },
              //   { stageLable: '完成数量（万片）', value: '2000' },
              //   { stageLable: '差异数量（万片）', value: '3000' },
              //   { stageLable: '完成率（%）', value: '4000' }
              // ]
            }
          ]
        },
        {
          id: '456',
          lineCode: 'CX000002',
          lineName: '产线2',
          planList: [
            {
              weekName: '第一周',
              startTime: '2021-01-01',
              endTime: '2021-01-02',
              planNums: 20,
              completeNums: 30,
              differenceNums: 10,
              percentageComplete: 130
              // stageList: [
              //   { stageLable: '计划数量（万片）', value: '1001' },
              //   { stageLable: '完成数量（万片）', value: '2001' },
              //   { stageLable: '差异数量（万片）', value: '3001' },
              //   { stageLable: '完成率（%）', value: '4001' }
              // ]
            },
            {
              weekName: '第二周',
              startTime: '2021-01-03',
              endTime: '2021-01-09',
              planNums: 20,
              completeNums: 30,
              differenceNums: 10,
              percentageComplete: 130
              // stageList: [
              //   { stageLable: '计划数量（万片）', value: '101' },
              //   { stageLable: '完成数量（万片）', value: '201' },
              //   { stageLable: '差异数量（万片）', value: '301' },
              //   { stageLable: '完成率（%）', value: '401' }
              // ]
            },
            {
              weekName: '第三周',
              startTime: '2021-01-10',
              endTime: '2021-01-16',
              planNums: 20,
              completeNums: 30,
              differenceNums: 10,
              percentageComplete: 130
              // stageList: [
              //   { stageLable: '计划数量（万片）', value: '10' },
              //   { stageLable: '完成数量（万片）', value: '200' },
              //   { stageLable: '差异数量（万片）', value: '300' },
              //   { stageLable: '完成率（%）', value: '400' }
              // ]
            }
          ]
        }
      ]
      //   拿到列表数据
      this.tableData = list
      this.planList = (list[0] && list[0]['planList']) || []
    }
  }
}
</script>
Easyui的二级表头
weixin_33922670的博客
03-13 301
为什么80%的码农都做不了架构师？>>> ...
利用layui创建二级表头
weixin_44544859的博客
05-17 1万+
(作者：杨东升，撰写时间：2019.5.17) 一般情况下，使用一级表头已经够用了，但是，如果我想在一级表头的内容再进行细化的时候，一级表头显然不够用了，如图所示：出现了重复的单价、合计，但这两个单价合计放的数据是不一样的，无法知道这是具体的哪个单价合计，如果在换成xx单价xx合计的话，又会影响表格的美观，那怎么解决呢 当然是使用二级表头啦，你看使用二级表头之后，想表达的内容是不是展现的一清二楚...
Excel导出含二级表头
weixin_43633568的博客
12-16 1501
代码是学习此链接 代码大致流程如下（用的是POI）： **1.**拿到所有表头放到二维数组，其中有一级表头的列：创建一维新数组，把一级放数组的[0]，二级放数组的[1][2]这样的，内容放到list **2.**创建新的Excel，然后创建新的sheet **3.**创建title-按照所有表头创建第一行，若遇到二级的-正常创建，遇到一级表头（第一步中的一维数组），取出一维数组的第一个（即一级表头），并合并一级表头所占的列 **4.**类似第三步，创建title-按照所有表头创建第一行，若遇到二级的-正常创
el-table二级表头固定列
A186G的博客
02-26 243
【代码】el-table二级表头固定列。
SpringMVC项目导出excel二级表头与三级表头——详解
Smile yourlife
07-09 1168
因业务需要，需要做一个报表导出的功能，因为公司把导出封装了一个框架。但是只是一级表头。现在做的是二级表头，所以需要重新开发。 如下图： 学习了一下poi基本知识，前面几篇有介绍，思路其实很简单，表头加表中数据。 下面直接上代码。 Controller层： @Controller @RequestMapping("/monthMark.do") public class MonthMarkCont...
vue3.0使用element-plus中的table动态二级表头渲染 数据
10-01
在 Vue 3.0 中使用 Element Plus 的 Table 组件并实现动态二级表头渲染数据，可以按照以下步骤进行： 1. **引入依赖**： 首先，你需要安装 Element Plus 和相关的依赖，例如 `vue`, `element-plus` 等。如果你还...
element-plus二级表头动态渲染
03-01
### 实现Element Plus中的二级表头动态渲染 为了实现在Element Plus中创建具有动态二级表头的表格，可以采用定义配置化的方式设置`el-table-column`属性。通过JavaScript对象来描述每一列以及子列的信息，并利用v-...
layui一级表头二级表头
最新发布
03-21
### Layui 表格实现一级表头和二级表头 在 Layui 中，可以通过配置 `cols` 参数来定义多级表头。具体来说，通过嵌套数组的方式可以轻松实现一级表头和二级表头的效果。 以下是具体的实现方法以及代码示例： #### ...
实现jqGrid三级表头功能，支持冻结，拖动
04-18
例如，一级表头可能表示大类别，二级表头表示子类别，而三级表头则进一步细化为具体项。 要实现jqGrid的三级表头，我们需要在`colModel`配置中定义每一级的列标题。每个列对象可以包含一个`subgrid`属性，这个属性...
el-table 动态合并表头 二级表头为null后 下次二级表头有数据的时候 会不显示二级表头怎么解决
07-15
在这个例子中，只有当 `secondHeaders` 不为 null 时，才会渲染二级表头列。 通过以上方法，可以确保在二级表头为 null 后再次有数据时也能正确显示二级表头。希望能对你有所帮助！如果还有其他问题，请随时提问。
导入excel（基础表+多表头（二级表头，三级表头）-封装组件实现导入xslx）推荐使用
lanbaiyans的博客
03-29 2212
导入excel（基础表+多表头（二级表头，三级表头）-封装组件实现导入xslx）推荐使用, 思路：封装一个导入的组件，然后全局引用，可以导入基础表，二级表头，三级表头。 封装的组件的作用：接收用户上传的文件 xslx插件的任务：把用户上传的文件转换成 后端需要的数据结构 本文没有做的： 掉接口把数据传过去
excel导出动态表头以及二级三级表头，还有数据库动态的数据来源
qq_46804698的博客
11-04 4716
excel自定义导出二级三级表头
fastadmin 模板列表页 二级联动
nohank的专栏
05-09 696
在二级联动文本框中加入属性 data-params='{"custom[group_id]":"1"}'js文件：添加或修改方法里加入提交参数。
elemenetui 布局_elemenetUI二级表头动态渲染
weixin_31934101的博客
02-23 368
一、elemenetUI二级表头动态渲染接到需求写一个要做一个如图所示的表格，要求数据表头动态加载；​ 开始拿到这个需求，对我一个后端开发人员来说还是有点难度，百度到一些多级表头渲染的，但是对后端传来的格式要求太多，耗费的精力也太多；最后参考百度的一篇博客终于成功渲染，废话不多说，直接上代码；后端需要传来的数据格式“listOut”: [{custNo: '1111',aList: [{am...
elementui的el-table的v-for遍历二维数组显示
热门推荐
青烟小生的博客
09-25 2万+
elementUI的el-table的循环遍历二维数组，v-for循环遍历二维数组并且显示成表格的形式 这些其实就是Excel表格的数据转化下来先是查看数组类型的样式全部的数据 async reafXls(){ let res = await this.$api.teaback.readXls() console.log(res); this.dataList = res.excelObj this.goodsList = res.excelObj.slice(
vue3表格数据分2个表格序号连续展示
weixin_48420104的博客
01-24 1751
this.tableData.slice(0, Math.ceil(this.tableData.length / 2))，也就是slice(0, 1)，也就是切割到唯一一条数据。包含 6 条数据，第一个表格显示前 3 条，第二个表格显示后 3 条。，我们希望在第一个表格中展示前半部分的数据，第二个表格中展示后半部分的数据。当数据为单数时，第一条数据会切割到了右边表格，左边表格无数据。当数据为单数时，第一条数据会切割到了右边表格，左边表格无数据。所以有且仅有一条数据时，就跑到了右边表格，左边表格没数据。
el-table-column实现多级表头+多级表格
weixin_51755740的博客
12-20 1350
【代码】el-table-column实现多级表头+多级表格。
JVxeTable插入行和合并单元格
哈哈哈的博客
01-11 2065
JvxeTable 是在JEECGBOOT项目中根据VxeTable封装的一个实用性组件，该组件介绍见[JvxeTable文档](https://help.jeecg.com/component/JVxeTable.html)。该组件中封装有新增功能，插入行功能没有实现，下面介绍JvxeTable的插入行功能。参考[vxe-table api文档](https://vxetable.cn/v4/#/table/api)
Springboot与easypoi（2）：合并单元格、二级表头、动态导出
游王子og的博客
11-02 1760
使用@Excel(needMerge = true)标记的属性表示此单元格需要合并。@ExcelCollection表示一对多的集合，下面是合并单元格案例。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值