vue+elementui table表格递归生成多级表头

最新推荐文章于 2024-08-16 17:45:38 发布

置顶

tsw529

最新推荐文章于 2024-08-16 17:45:38 发布

阅读量7.5k

点赞数 11

分类专栏： vue项目文章标签： vue javascript

本文链接：https://blog.csdn.net/tsw529/article/details/107629302

版权

本文介绍了如何使用Vue.js结合ElementUI来动态生成多级表头，重点在于利用递归组件实现复杂表格布局。通过tableView、tableItem和columnItem组件的配合，实现了灵活的表格设计。

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

前言

近期在写一个后台管理系统的项目,需要表格动态生成多级表头,项目中使用了递归组件,自己总结一下加深记忆.话不多说,直接上代码.

1.tableView.vue

<template>
  <div>
    <table-item :tableData="tableData" :col="col"></table-item>
  </div>
</template>
<script>
import tableItem from "./tableItem";
export default {
  name: "TableView",
  components: {
    tableItem,
  },
  data() {
    return {
        //树型结构表头数据
      col: [
        {
          prop: "date",
          label: "日期",
        },
        {
          label: "配送信息",
          children: [
            {
              prop: "name",
              label: "姓名",
            },
            {
              label: "地址",
              children: [
                {
                  prop: "province",
                  label: "省份",
                },
                {
                  prop: "city",
                  label: "市区",
                },
                {
                  prop: "address",
                  label: "城镇",
                },
              ],
            },
          ],
        },
        {
          prop: "remark",