Element UI 动态生成多级表头（无线套娃）

最新推荐文章于 2025-02-19 11:31:09 发布

冰丶糕

最新推荐文章于 2025-02-19 11:31:09 发布

阅读量1.2k

点赞数 10

分类专栏：前端文章标签： ui vue.js elementui

本文链接：https://blog.youkuaiyun.com/weixin_61497053/article/details/135913142

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用ElementUI将Table和Column封装成可复用的DynamicTable.vue和TableColumn.vue组件，实现动态生成多级表头，以及在模板中如何引用和使用这些组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、将Table和Column封装成两个组件

封装两个组件，分别为DynamicTable.vue和TableColumn.vue，TableColumn.vue主要是使用递归来对表头进行循环生成DynamicTable.vue

DynamicTable.vue

<template>
    <el-table :data="tableData" border :height="height">
      <template v-for="item in tableHeader">
        <table-column v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></table-column>
        <el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop"></el-table-column>
      </template>
    </el-table>
  </template>
  
  <script>
  import TableColumn from './TableColumn'
  export default {
    props: {
      // 表格的数据
      tableData: {
        type: Array,
        required: true
      },
      // 多级表头的数据
      tableHeader: {
        type: Array,
        required: true
      },
      // 表格的高度
      height: {
        type: String,
        default: '300'
      }
    },
    components: {
      TableColumn
    }
  }
  </script>
  
  <style scoped>
  
  </style>

TableColumn.vue

<template>
    <el-table-column :label="coloumnHeader.label" :prop="coloumnHeader.label">
      <template v-for="item in coloumnHeader.children">
        <tableColumn v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></tableColumn>
        <el-table-column v-else :key="item.name" :label="item.label" :prop="item.prop"></el-table-column>
      </template>
    </el-table-column>
  </template>
  
  <script>
  export default {
    name: 'tableColumn',
    props: {
      coloumnHeader: {
        type: Object,
        required: true
      }
    }
  }
  </script>
  
  <style scoped>
  
  </style>

二、使用

<template>
    <dynamic-table 
        :table-data="tableData" 
        :table-header="tableConfig" 
        v-if="dynamicTableShow"
    ></dynamic-table>
</template>
<script>
import DynamicTable from './components/DynamicTable'

export default {
    components: {
        DynamicTable
    },
    data() {
        return {
            tableData: [],
            tableConfig: [],
            dynamicTableShow: false
        }
    }
}
</script>