vue element-ui表格组件动态多级表头-Toy模板网

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

实际项目的需求，需要根据后端动态获取的方式来初始化表格的表头包含哪些信息，且有很多信息是有规律的，所以我们需要Element UI动态生成多级表头。需要的效果图如下：

elementui动态多级表头,vue.js,前端,javascript

由于统计维度是可变化的（它可以是省市也可以是区县），所以需要专门设置一个表格的数据来保存表头，然后通过v-for="item in tableColData"的方式来循环展示表头，由于省市是循环展示表头数据的，所以如果省市里面如果有第二级别的表头，就需要在表头数据多设置一级children，加上第二层v-for="item1 in item.children"来遍历二级表头。代码如下：

 <el-table
     :cell-class-name="addClass"
      class="table_style"
      :data="tableData9"
      :header-cell-style="{
        backgroundColor: 'rgba(3,39,85,0.92)',
        color: '#BADCFF',
        fontSize: '16px',
        textAlign: 'center',
      }"
      :cell-style="{
        color: '#fff',
        backgroundColor: 'transparent',
        fontSize: '16px',
        textAlign: 'center',
      }"
      :row-style="{
        color: '#fff',
        backgroundColor: 'transparent',
        fontSize: '16px',
        textAlign: 'center',
      }"
      style="width: 100%"
      max-height="252"
    >
      <el-table-column
        v-for="item in tableColData"
         width="180px"
        :prop="item.id"
        :label="item.name"
        :key="item.id"
        :fixed="item.fixed"
      >
        <el-table-column
          width="180px"
          v-for="item1 in item.children"
          :prop="item1.id"
          :label="item1.name"
          :key="item1.id"
        >
        </el-table-column>
      </el-table-column>
    </el-table>

表头数据格式如下：

[{
    "id": "wd",
    "name": "时间维度"
  },
  {
    "id": "qu1",
    "name": "贵池区",
    "children": [
      {
        "id": "qu1-dy",
        "name": "当月"
      },
      {
        "id": "qu1-dyzz",
        "name": "当月增长"
      },
      {
        "id": "qu1-lj",
        "name": "累计"
      },
      {
        "id": "qu1-ljzz",
        "name": "累计增长"
      }
    ]
  },
  {
    "id": "qu2",
    "name": "东至县",
    "children": [
      {
        "id": "qu2-dy",
        "name": "当月"
      },
      {
        "id": "qu2-dyzz",
        "name": "当月增长"
      },
      {
        "id": "qu2-lj",
        "name": "累计"
      },
      {
        "id": "qu2-ljzz",
        "name": "累计增长"
      }
    ]
  }]

表内数据如下：

[
  {
    "wd": "2月",
    "qu1-dy": "43.4",
    "qu1-dyzz": "-1.9%",
    "qu1-lj": "159.9",
    "qu1-ljzz": "-14.7%",
    "qu2-dy": "43.3",
    "qu2-dyzz": "-1.9%",
    "qu2-lj": "159.9",
    "qu2-ljzz": "-14.7%"
},
]

需要注意的是每个数据的字段需要和表头id对应上.

文章来源地址https://www.toymoban.com/news/detail-688436.html

到了这里，关于vue element-ui表格组件动态多级表头的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！