Element UI动态生成多级表头

这篇具有很好参考价值的文章主要介绍了Element UI动态生成多级表头。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 基础常用的原型样例 

我们常常遇到的情况就是表头固定的,我们需要从后端获取对应表头的信息,如果信息比较多的时候为了方便我们展示,可以固定表头和列,下面是一个我们常见的例子:

固定列和表头可以同时使用,只需要将上述两个属性分别设置好即可。

  • 前端显示:

Element UI动态生成多级表头 

  • 代码实现
<template>
  <el-table
    :data="tableData3"
    style="width: 100%"
    height="250">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    }
  }
</script>

2 应用场景分析

        由于项目的需求,需要根据用户自定义的方式来初始化表格的表头包含哪些信息,有很多信息是有规律的,所以我们需要Element UI动态生成多级表头。场景:

     Element UI动态生成多级表头

 层数是可变化的,所以需要专门设置一个表格的数据来保存表头,然后通过v-for="item in tableColData"的方式来循环展示表头,由于层数是循环展示表头的,所以如果层数里面如果有第二级别的表头,就需要在表头数据多设置一级children,加上第二层v-for="item1 in item.children"来遍历二级表头。

  • 前端展示

Element UI动态生成多级表头文章来源地址https://www.toymoban.com/news/detail-508805.html

  • 代码实现
<template>
       <el-table
          :data="tableData9"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
          max-height="500"
          @cell-mouse-enter="handleCellEnter"
          @cell-mouse-leave="handleCellLeave"
        >
        <el-table-column v-for="item in tableColData"
          :prop="item.id"
          :label="item.name"
          :key="item.id">
          <el-table-column v-for="item1 in item.children"
            :prop="item1.id"
            :label="item1.name"
            :key="item1.id">
          </el-table-column>
        </el-table-column>
          
         
        </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableColData: [{
          id: 'num',
          name: '序号'
        }, {
          id: 'class',
          name: '课程'
        }, {
          id: 'floor',
          name: '地下一层',
          children: [{
            id: 'numRoom',
            name: '间',
          },
          {
            id: 'areaOfUse',
            name: '使用面积',
          },
          {
            id: 'areaOfStru1',
            name: '建筑面积1',
          },
          {
            id: 'areaOfStru2',
            name: '建筑面积2',
          }]
        }, {
          id: 'floor',
          name: '地下一层',
          children: [{
            id: 'numRoom',
            name: '间',
          },
          {
            id: 'areaOfUse',
            name: '使用面积',
          },
          {
            id: 'areaOfStru1',
            name: '建筑面积1',
          },
          {
            id: 'areaOfStru2',
            name: '建筑面积2',
          }]
        }, {
          id: 'floor',
          name: '地下一层',
          children: [{
            id: 'numRoom',
            name: '间',
          },
          {
            id: 'areaOfUse',
            name: '使用面积',
          },
          {
            id: 'areaOfStru1',
            name: '建筑面积1',
          },
          {
            id: 'areaOfStru2',
            name: '建筑面积2',
          }]
        }, {
          id: 'floor',
          name: '地下一层',
          children: [{
            id: 'numRoom',
            name: '间',
          },
          {
            id: 'areaOfUse',
            name: '使用面积',
          },
          {
            id: 'areaOfStru1',
            name: '建筑面积1',
          },
          {
            id: 'areaOfStru2',
            name: '建筑面积2',
          }]
        }
      ],
      // 表内容
      tableData9: [{
        num: '1-1-1',
        class: '小学教室',
        AperRoom: '84',
        numRoom: '13',
        areaOfUse: '1092',
        areaOfStru1: "1985",
        areaOfStru2: "1985"
      }],
      
      }
    }
  }
</script>

到了这里,关于Element UI动态生成多级表头的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui table动态渲染表头

    1.在模板中,使用 v-for 指令遍历 tableData 数组,并将每个对象的属性作为表格的列名来渲染表头。 2.定义  tableColumns  数组,并在组件创建时根据数据动态生成它。如果想根据  tableData  中第一个对象的属性来渲染表头列,可以在  created  钩子函数中进行操作 3.当 tableData 的

    2024年02月08日
    浏览(39)
  • Vue+Element ui动态表格 实现表头自适应宽度

    根据业务需求,工作中会出现表头信息不固定,根据后台返回数据,我们要实现动态表格的实现 1. tableData为表格数据,tableHeader为表头数据。 2. 实现表头自适应宽度(二种方法)     ① 第一种通过动态width来定义,通过表头数据的遍历,将label的表头信息传入方法中     

    2024年02月15日
    浏览(48)
  • vue+Element UI Table表格动态渲染表头内容及操作按钮

    循环表格头信息数组 封装操作组件并引入表格文件内 配置表头信息数组及添加操作事件

    2024年02月13日
    浏览(66)
  • vue+element ui生成以当月日期时间为表头的table表格

    最近在写项目的时候遇到了一个新的需求,就是需要生成一个以当前月份日期时间为表头的表格,用来展示这个月的值班情况 表格上方有切换月份的按钮,切换对应的月份,表头要显示对应的月份的日期以及对应月份下面的数据,没有安排值班的日期,用/表示,属于当天的

    2024年02月08日
    浏览(54)
  • EasyExcel动态表头导出(支持多级表头)

    在很多业务场景中,都会应用到动态表头的导出,也会涉及到多级表头的导出,如下图所示 通过EasyExcel,我们可以快速实现这一需求,具体代码如下 maven依赖 DynamicHeader.java CustomTitleWriteHandler.java CellStyle.java DynamicExcelUtils.java

    2024年02月08日
    浏览(72)
  • Vue 中 Element UI 的 el-table 组件实现动态表头和内容

    在 Vue 中使用 Element UI 的 el-table 组件时,为了实现动态表头(包括第一层表头及其下的嵌套表头或子表头)。需要后端返回的数据结构能够体现表头层级关系以及对应的数据结构相匹配。这样的数据通常是一个嵌套数组,每个表头单元可能包含自身的列信息以及它的子表头和

    2024年01月20日
    浏览(52)
  • poi+easypoi实现表头多层循环,多级动态表头、树形结构动态表头、纵向合并单元格、多个sheet导出

    我前面也写过几篇关于easypoi复杂表格导出的文章,什么一对多纵向合并、多级表头、动态表头、多个sheet等,这些我写那几篇文章之前做项目都遇到过,并且都实现出来了。 感兴趣的可以看看: easypoi多级表头、多个sheet导出,动态导出列、动态更改表头 easypoi一对多,纵向合

    2024年02月08日
    浏览(40)
  • Vue动态多级表头+行列合计+可编辑表格

    新建组件:Table.vue 新建组件: 可参考链接 https://blog.csdn.net/weixin_45275107/article/details/127509100 https://blog.csdn.net/weixin_39166851/article/details/130765957 https://blog.csdn.net/m0_67841039/article/details/131308126 https://blog.csdn.net/weixin_40881970/article/details/124699566

    2024年02月16日
    浏览(52)
  • Vue Element-UI 使用v-for设置动态表头,formatter进行数据展示格式化

    element-ui 官网的 table 比较繁琐需要写很多 el-table-column 标签 我们巧用vue的 v-for 循环进行简化代码 话不多说直接开演!!! 我在 src/components/dict 下面建立一个 Dic.js 文件写上一个方法 在组件里面引用 在我们需要格式化的 columns 添加 formatter

    2024年02月16日
    浏览(48)
  • 【vue】element-ui、el-table使用V-for循环动态添加表头和数据

    参考链接 https://blog.csdn.net/xz1589155358/article/details/126597271

    2024年02月11日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包