elementui-table封装

原创

已于 2023-03-15 11:18:46 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript #前端

于 2023-03-15 11:15:20 首次发布

本文介绍了如何基于ElementUI Admin Pro v2.15.13进行table组件的二次封装，旨在简化前端代码，提高复用性。通过动态数据渲染表头，允许自定义列参数，支持分页和自定义组件，降低开发复杂度。

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

一、介绍

背景：

基于 elementui admin pro 版本框架，组件库版本2.15.13

目的：

基于以上实现table组件的二次封装，使其使用更加方便，减少代码量，提高复用性

总的来说就是把table的表头改成动态数据渲染，调用的时候将表头数据和表格数据传给ExTable子组件渲染，不用一行一行的写el-table-column，每列都可以自定义需要的参数还是很方便的，另外还可以加上分页，加上自定义组件根据render修改列数据展示内容

二、步骤解析

官方代码大家可以去elementui官方组件库

创建ExTable.vue组件，创建数据文件formData.js文件。
在ExTable.vue中添加table组件改造代码
ExTable.vue表格需要的表头数据

三、代码详情

ExTable.vue代码（不含样式）：

<el-table
            :data="tableData"
            border
            stripe
            style="width: 98%;margin-top:10px;"
          >
            <el-table-column
              v-for="(item, index) in userData"
              :key="index"
              :type="item.type || ''"
              :prop="item.prop"
              :label