二次封装table，一分钟写一个页面

最新推荐文章于 2024-08-07 20:15:00 发布

原创最新推荐文章于 2024-08-07 20:15:00 发布 · 413 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了作者如何在公司项目中为提高开发效率，对 ElementPlus 组件库的表格进行二次封装。封装后的组件包含了加载、查询、搜索、分页和自定义功能，如操作列、状态列和筛选。文章详细展示了配置文件的结构和组件的使用方法，包括表格列的定义、数据源的处理以及模板的编写。同时，提供了源码链接供读者参考和学习。

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

一、组件介绍

在公司时，写的页面多了，就感觉特别没有意思，所以我对ElementPlus进行了二次封装，相信大幅度提升自己的开发效率，有兴趣的可以看看。接下来进入正题。

组件功能：封装了loading，查询，搜索框展开和搜索功能，同时也是实现了适配功能，分页等功能，相对来说还是挺好用的，大家在每次做管理系统都能提升效率，大家可以根据下面的配置文件进行配置即可使用。

组件主要通过配置的形式实现表格以及筛选表单等。具体实现如下图。

二、使用方法

el-table表格绘制需要column和data吧，column就是表格的表头，data则是数据源。每次都要请求数据避免不了的，所以我将请求封装到表格里。好处在于，你可以在内部进行传参，在外部可以接受参数，从而实现数据的筛选和分页功能等。如果不清楚来看代码一点点实现。

1. 观察上图你会发现，封装的zc-table需要两部分，一部分是search栏，第二部分则是展示数据的表格，所以在封装时，分为search和table两部分。

2.搜索栏和分页先不管，先进行中间table的封装。分析都需要什么，数据源和表头。表头就是每个el-table-column了，数据源就是<el-table :data=""/>, 既然时封装组件那么就要将数据和表头通过外部通过组件传参的形式实现。

表格的配置项

const config = tableConfig({
  column: [
    {
      prop: "id",
      label: "用户id",
      sortable: true,
      minWidth: "100",
    },
    { prop: "name", label: "用户姓名", minWidth: "200" },
    { prop: "realname", label: "真实姓名", minWidth: "200" },
    {
      prop: "tag",
      label: "标签",
      minWidth: "100",
      slotName: "filters",
    
    },
    {
      prop: "status",
      type: "select",
      label: "状态",
      minWidth: "200",
      slotName: "status",
    },
    {
      label: "操作",
      minWidth: "120",
      slotName: "handler",
      fixed: "right",
      show: false,
    },
  ],
// 显示序号列
  showIndexColumn: true,
// 显示多选框
  showSelectColumn: true,
});

v-bind会绑定config里的所有属性。

<zc-container>
    <zc-table
      v-bind="config"
      :is-collpase="true"
      :request="request"
      height="250"
      :pagination="{
        total: true,
        sizes: true,
        jumper: true,
      }"
    >
      <template #header>
        <div class="header-default">
          <el-button type="primary"> 导出 </el-button>
        </div>
      </template>
      <template #handler="scope">
        <el-button link size="small" type="primary"> 编辑 </el-button>
        <el-button link size="small" type="primary"> 删除 </el-button>
      </template>
      <template #status="scope">
        <el-button>{{ scope.row.status === 0 ? "禁用" : "启用" }}</el-button>
      </template>
      <template #filters="scope">
        <el-tag
          :type="scope.row.tag === '312' ? '' : 'success'"
          disable-transitions
          >{{ scope.row.tag }}</el-tag
        >
      </template>
    </zc-table>
  </zc-container>

再看看el-table封装

<el-table
      :data="tableRefData"
      style="width: 100%"
    >
      <!-- 1.传入showSelectColumn时展示的全选列 -->
      <template v-if="showSelectColumn">
        <el-table-column type="selection" />
      </template>
      <!-- 2.传入showIndexColumn时展示的序号列 -->
      <template v-if="showIndexColumn">
        <el-table-column type="index" label="序号" width="70px" />
      </template>
      <template v-for="item in column">
        <el-table-column v-bind="item" show-overflow-tooltip>
          <template #default="scope" v-if="item.slotName">
            <slot :name="item.slotName" :row="scope.row" />
          </template>
        </el-table-column>
      </template>
// 自定义空数据
      <template #empty>
        <empty></empty>
      </template>
    </el-table>

实在是没法写了，大家想要源码。https://gitee.com/liu--zicheng/vue3-vite-templatehttps://gitee.com/liu--zicheng/vue3-vite-template