使用element-ui实现动态渲染多级表头，同时渲染数据

最新推荐文章于 2024-08-15 16:23:44 发布

努力站桩的奶酪呦

最新推荐文章于 2024-08-15 16:23:44 发布

阅读量623

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/liuli0927/article/details/130365758

版权

本文介绍如何利用Vue.js和Element-UI库实现表格的动态多级表头渲染，并详细讲解了数据绑定和组件交互的过程，帮助开发者创建灵活的数据展示方案。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <el-table
      ref="refreshTable"
      v-loading="loading"
      :data="listData"
      :header-cell-style="{ background: '#007F69', color: '#fff' }"
      highlight-current-row
    >
      <el-table-column
        fixed
        width="170px"
        label="测点"
        align="center"
        prop="测站名称"
      />
      <el-table-column label="降雨日期(mm)" align="center">
        <template v-for="(item, index) in dataList">
          <el-table-column
            align="center"
            :prop="item.name"
            :label="item.house"
            :key="index"
            v-if="item.name != 'id'"
          ></el-table-column>
        </template>
      </el-table-column