基于element-ui组件二次封装篇（4）-table组件1（基本功能）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

写在前面的话

在开发一些后台管理系统时，最常用的组件莫过于table组件了。通常，开发习惯于基于某个框架后复制粘贴其table组件的代码，然后在对应开发其业务逻辑。这样做没什么问题，但是我们有更好的实现方式，就是把table组件封装起来，通过传入一些数据及配置项渲染到业务组件，这样以一敌百，大大提升开发效率。

本次开发基于vue3.0+ts，本组件基于element-ui进行二次封装。

组件开发

1.首先观察elementui的基本table组件的代码，然后将其引入子组件中

2.定义配置项数据结构

如上图，在业务组件中，我们需要配置每一表格列的prop值，label值和width值，再将这些配置数据和表格列表数据传入子组件。

3.子组件页面开发

• 首先接收业务组件传入的配置项数据和表格列表数据
• 遍历每个表格列，将props和label和width以变量的形式赋值进去

<template>
  <el-table 
      :data="data" style="width: 100%" >
    <el-table-column 
      :prop="item.props" 
      :label="item.label" 
      :width="item.width?item.width:''"
      />
    </template>
  </el-table>
</template>
​
<script  setup>
import {defineProps} from "vue";
 const props=defineProps({
  form: Array, 
  data:Array, //数据源
});
</script>

4.业务组件开发

<my-table :data="tableData" :form="tableForm"></my-table>

总结

至此，以上的基于element-ui的table组件的二次封装最基本的功能开发完成。当然，这只是最简单的基本功能，开发过程肯定不止需要这些功能啦。比如：是否多选，是否单选，是否需要排序，是否需要展示序号以及是否需要自定义编辑删除等操作按钮等等的其他功能，将在下一篇文章进行总结概述。