vue-admin-template + element-ui 改造table组件实现二次封装简化调用(一)

最新推荐文章于 2025-11-08 08:59:30 发布

原创

最新推荐文章于 2025-11-08 08:59:30 发布 · 787 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

本文介绍了在基于vue-admin-template的项目中，为提高开发效率和维护性，对element-ui的table组件进行二次封装的过程。通过具名插槽的方法，实现了组件的灵活调用，允许在调用位置自定义内容，降低了页面HTML代码的复杂度。

项目使用的是vue-admin-template的开发模板，但是vue-admin-template里并没有对table进行二次封装，导致使用的过程中在页面会产生大量的html代码，对开发来说很不友好，也无法做到页面的统一，为了后期的维护和升级，故将table组件做了二次封装

###table封装

<template>
  <el-table :data="tableData" style="width: 100%">
    <template v-for="column in tableHead">
      <slot :name="column.field" :column="column">
        <el-table-column :prop="column.field" :label="column.label" width="180" />
      </slot>
    </template>
  </el-table>
</template>

  <script>
export default {
   
   
  props: {
   
   
    tableData: {
   
   
      type: Array,
      default() {
   
   
        return []
      }
    },
    tableHead: {
   
   
      type: Array,
      default() {
   
   
        return []
      }
    }
  },