痛点频出？从此与无意义的表格设计say goodbye！看这六款开源组件！

工作中难免遇到重复劳动。每次对着 Element-UI 中的 el-table 一顿乱撸。为了避免重复劳动，代码生成器一定是一个不错的选择。

在日常开发中难免对后台返回的数据进行一些处理。然而在使用 el-table-column 的时候，经常使用 el-table-column 的 cell:true 的功能，这无疑不是一种重复劳动。

element-ui 中有如此多的组件，对这些组件进行了解不仅可以帮助我们更有效的开发，还可以提高我们的开发效率。

一、基础组件介绍

Element-UI 组件库是一个开源的、免费的前端 UI 框架，它提供了丰富的组件，可以帮助我们快速搭建出漂亮的、可交互的界面。Element-UI 组件库中的组件可以分为基础组件、表单组件、数据展示组件、导航组件、反馈组件和布局组件。

1. 基础组件

基础组件是一些常用的组件，包括按钮、图标、输入框、复选框、单选框等。这些组件可以帮助我们快速搭建出基本的用户界面。

2. 表单组件

表单组件是一些用于创建表单的组件，包括表单、表单项、输入框、单选框、复选框、日期选择器等。这些组件可以帮助我们快速搭建出各种各样的表单。

3. 数据展示组件

数据展示组件是一些用于展示数据的组件，包括表格、树形结构、分页、进度条等。这些组件可以帮助我们快速展示各种各样的数据。

4. 导航组件

导航组件是一些用于导航的组件，包括菜单、导航条、面包屑等。这些组件可以帮助我们快速搭建出各种各样的导航界面。

5. 反馈组件

反馈组件是一些用于提供反馈的组件，包括消息提示、加载中、模态框等。这些组件可以帮助我们快速搭建出各种各样的反馈界面。

6. 布局组件

布局组件是一些用于布局页面的组件，包括布局、头部、页脚、侧边栏等。这些组件可以帮助我们快速搭建出各种各样的页面布局。

二、el-table表格设计介绍

Element-UI 中的 el-table 表格组件是一个功能强大的表格组件，它可以帮助我们快速搭建出各种各样的表格。el-table 表格组件支持丰富的配置项，我们可以根据自己的需要进行配置。

1. 表格的基本配置

el-table 表格组件的基本配置包括：

• table-layout：表格的布局方式，可以设置为 auto 或 fixed。
• height：表格的高度，可以设置为数字或字符串。
• max-height：表格的最大高度，可以设置为数字或字符串。
• width：表格的宽度，可以设置为数字或字符串。
• max-width：表格的最大宽度，可以设置为数字或字符串。
• stripe：是否显示斑马线，可以设置为 true 或 false。
• border：是否显示边框，可以设置为 true 或 false。
• size：表格的大小，可以设置为 medium、small 或 mini。
• fit：是否自适应父容器，可以设置为 true 或 false。

2. 表格的列配置

el-table 表格组件的列配置包括：

• prop：列的属性名，即表格数据中该列对应的属性值。
• label：列的标题，即表格头中该列的文本。
• width：列的宽度，可以设置为数字或字符串。
• min-width：列的最小宽度，可以设置为数字或字符串。
• max-width：列的最大宽度，可以设置为数字或字符串。
• fixed：列是否固定，可以设置为 true 或 false。
• align：列的对齐方式，可以设置为 left、center 或 right。
• header-align：列头的对齐方式，可以设置为 left、center 或 right。
• sortable：列是否支持排序，可以设置为 true 或 false。
• filterable：列是否支持过滤，可以设置为 true 或 false。
• type：列的类型，可以设置为 string、number、boolean、date、datetime、array 或 object。
• formatter：列的格式化函数，可以用来格式化列中的数据。
• render：列的渲染函数，可以用来渲染列中的数据。

3. 表格的操作配置

el-table 表格组件的操作配置包括：

• row-key：表格中每行的唯一标识，可以设置为字符串或数字。
• edit-config：表格的编辑配置，包括是否支持编辑、编辑模式、编辑规则等。
• delete-config：表格的删除配置，包括是否支持删除、删除模式、删除规则等。
• selection-config：表格的选择配置，包括是否支持选择、选择模式、选择规则等。
• pagination-config：表格的分页配置，包括是否支持分页、分页模式、分页大小、当前页等。

三、el-table 代码生成器

为了方便我们快速搭建出表格，我们可以使用 el-table 代码生成器。el-table 代码生成器可以根据我们的需要自动生成 el-table 表格组件的代码。

1. el-table 代码生成器地址

el-table 代码生成器的地址为：

https://element.eleme.cn/#/zh-CN/component/table-generator

2. el-table 代码生成器使用方法

el-table 代码生成器的使用方法如下：

1. 在 el-table 代码生成器页面中，选择表格的布局方式、表格的高度、表格的宽度、表格的最大宽度、是否显示斑马线、是否显示边框、表格的大小、是否自适应父容器等基本配置。
2. 在 el-table 代码生成器页面中，点击“添加列”按钮，添加表格的列。
3. 在 el-table 代码生成器页面中，为每列配置属性名、列的标题、列的宽度、列的最小宽度、列的最大宽度、列是否固定、列的对齐方式、列头的对齐方式、列是否支持排序、列是否支持过滤、列的类型、列的格式化函数、列的渲染函数等配置。
4. 在 el-table 代码生成器页面中，点击“生成代码”按钮，生成 el-table 表格组件的代码。

3. el-table 代码生成器注意事项

el-table 代码生成器生成