用上一句话写作：我们在上一节中意识到的是简单的形式。如下所示，今天我们将学习表单组件的最常见形式组件。逐步迈向更复杂的页面。
此页面上的核心知识点：（1）[搜索表格模块]搜索搜索，重置函数重置，日期选择器datepicker，dropdon fringe box pose select select select;（2）[列表显示模块]时间标准化时刻，标签标签，使用标签标签，使用标签标签，使用标签标签，使用标签标签，使用标签标签，标签标签和标签标签。Obligo-tootip使用；
分析：页面分为两个核心部分：[搜索栏] [列表]
（1）消息列表界面interface intinialize。pageNum pageize是一个请求参数，不需要。响应参数在列表中。
（2）搜索接口 - 但是搜索接口通常可以直接使用列表接口
使用封装的组件（随附的代码之后），data = {listData}指示列表中的列表数据，请注意数据DATAINDEX需要编写接口返回的参数。
可以看出，搜索设置为页面上的一个组件，并将组件放在后面。在这一点上，已经实现了页面效果，但是还没有数据
在页面的主要功能中写下初始功能
在模型页面上写详细的接口调用信息
其中，我们使用ListMom1组件来帮助页面数据返回。主要功能是添加数据编号并实现页面的分页函数。将详细的包装代码附加了。它们类型：'反馈/setstos，指示数据可以存储在缓存中，并且数据可以通过组件传递。因此，数据= {listData}需要在标准表中进行键入，以实现数据初始化显示。
您可以看到背景中返回的数据如下，
但是，（1）[标题和内容]数据太长，我们需要在前5个字符（例如...）中显示它。（2）对于[日期]数据，只需要在特定的一天中显示，而不是在几秒钟内，（3）[状态]数据显示0、1，但前端还需要将其排序为“无请自来的”
（1）数据拦截挠度的数据，在悬停之后全部显示---使用工具提示组件
（2）日期拦截相同的原则
（3）对于0、1、2个状态数据，接口返回
在日期需要查询需要特殊处理。
（1）最终时间需要比开始时间晚
因此，将禁用数据添加到DataPicker组件中。
（2）提交时间格式处理
并添加时间格式处理到查询函数
您需要添加重置功能的相应时间处理
此时，该页面已在本文中完成，页面效果如下
原始：https：//juejin.cn/post/7103737204534411271