今天是美好的一天，充满爱的节日。看到合适的机会，所以我决定慢慢找到它。毕竟，第一位志愿者仍然想在一家大型工厂工作，所以我不关注一些小工厂。总的来说，革命尚未成功，同志们需要努力工作。
旧规则，在谈论主题之前谈论背景。在公司工作时，它仍在发展对开发的需求。在此期间，需求是实施表的头部筛选功能。实际上，这不是需求。制定页面渲染持续时间并变得更长，影响体验。因此，选择使用DIV框来渲染表格表单并自己编写表单样式。然后没有准备好制作的头部筛选组件，因此您需要打包一个标题筛选组件，以便利其他同事的其他页面和其他同事。
这就是上述效果：有一个输入框来筛选选项列表，将选择“命中”，然后单击“重置”按钮清除搜索框值并关闭筛选组件。这是自定义的筛选组件。
实际上，我有点困惑地编写这种包装组件。我不知道如何表达它来让您知道我想表达的内容。我正在慢慢探索如何撰写此类文章。我希望后续的表达能够为您提供帮助，让您了解本文的组件包装过程。不用说，让我们做一个组件以查看我的方法是否与您的思维一致，让我们走吧！
首先，包装组件的基础知识很方便后续重复使用，其次，其他组件不适用于他们自己的需求方案，因此目前我们需要封装我们需要的组件。喜欢这种感觉）。
使用了本文的技术堆栈，该框架仍然是与之匹配的库，并且在此期间将有一些语法和一些用途，因此技术堆栈不是或不熟悉相关知识的合作伙伴要理解这个想法，然后是其他其他用途来您自己使用其他的想法。技术堆栈被类似的组件封装。
接下来，它将根据背景中提到的效果分为小块→
引用的组件：
从上面的代码可以看出，外层包裹在带有表单组件的内部组件代码中。这样做的目的之一是控制它，以便我们可以采用该值并避免异步分配。然后，组件的隐藏组件使用下拉组件。在这里，您还可以使用popover组件来依赖您通常喜欢使用的组件，并且其显示或隐藏将控制它是根据单击图标显示的。组件的核心包括：输入框，复选框和操作按钮（重置，确定）和复选框将其与列表组件包装。这是为了将来您可以使用列表的虚拟滚动效果的复选框的值。
这是组件的主要代码，上述布局中涉及的方法将一一解释。
首先是定义可能在外部中引入的变量，即值：
然后定义下拉组件的显示位置的可变值集：
然后，内部组件的变量定义的定义：
在组件布局中，您可以看到表单上的控件实例是由方法设置的。UUID插头 - 用于防止多个筛选组件表单实例重复重复。设置实例代码如下：
然后接受从外部传输的筛选项目的内部数据变量接收：
现在，数据可用，然后必须渲染并显示。列表组件在组件布局中渲染筛选选项，但是没有特定的代码可以显示特定的代码。特定代码如下：
可以看出，筛选项目是内部判断的。这是因为传输数据阵列可以是对象数组或字符串数组。如果是对象，则显示值，并且在选择它时值将其算出，并且字符串数组本身显示它。此处的判断是要使筛选组件应用更多数据方案，以使其更灵活。
渲染后，如果您希望下拉列表出现并操作，则必须单击图标以显示它。方法代码如下：
然后，就是要运营筛选成本。首先，应筛选输入框并自动选择匹配选项。因此，输入框事件的相应方法的特定代码如下：
可以看出，根据外部字段，它用于确定屏幕数组是字符串数组还是对象数组，以获取查询要求的过滤值集合。
筛选项目完成后，可能会选择很多项目。如果您不想一一取消选择，则可以直接单击“重置”按钮清空选项，隐藏drop -down，并告诉外部组件查询数据。该方法如下：
确定按钮将传播所选值，隐藏drop -down，并告诉外部组件查询数据。该方法如下：
但是，存在选择值不想询问的情况。目前，非滴定区域需要隐藏组件。目前，您需要收听用户点击的位置并处理相应的逻辑。
当所有这些完成后，还有另一个问题需要注意到，当外部组件同时使用多个筛选组件时，当需要清除相应的项目时，重置方法需要暴露于外部组件中用于打电话。如下：
好吧，引入了组件布局中涉及的方法。该顺序基于组件的渲染。引入了操作顺序。
好吧，以上是过滤器组件的完整代码。实际上，它也可以扩展，也就是说，有时无需搜索和自动检查我们的项目。因此，您需要显示搜索框，并且搜索框的原始逻辑不会移动。显示显示时，将自动选择逻辑。
封装组件后，是测试结果。
引入组件：
一起布局：
外部组件定义表格以接收选定的值：
逻辑代码：
样式文件：
好吧，如何封装过滤组件的方法和过程，并且该组件可用于您可以使用的任何方案。它不仅限于表标头，但是我们需要经常处理它，因此我们在表格上使用它，因此在表格上使用它。对相应的实际需求更改。这只是一个主意。如果您有更好的方法，则可以在评论区域进行交流。
最后，我祝大家520岁快乐！我要去度假，好！
XDM到目前为止读了文本，就像赞美吗？让我们再走3Q^_^
朋友，如果您认为这篇文章对您有所帮助，请单击吗？此外，如果存在问题或本文的不舒服部分，欢迎您在评论领域发表评论，并指出我们将一起讨论。
原始：https：//juejin.cn/post/7099754300268052487