VUE编写后台常用的组件

　　前几篇文章我们已经把后台的基础搭建好了，感兴趣的朋友可以点击一些链接，查看之前的基础搭建前端开发从零搭建VUE后台深入了解VUE3实践搭建后台（二）深入了解VUE3实践搭建后台（三）深入了解VUE3实践搭建后台（四）深入了解VUE3实践搭建后台（五）VUE3你不知道的按钮与菜单权限前言
　　上一篇文章我们讲解了按钮和菜单的权限，不清楚的同学可以点击上面的链接去查看一下。今天我们主要讲解后台中我们使用频率比较高的功能，然后我们把这些功能编写成一个组件。让大家熟悉一下组件的编写。方便我们后期的讲解。开始
　　在一个后台中，搜索条件、表格展示，文件上传等等，这些是我们必须要面对的。且使用频率非常高。单这些功能不是可以简单的使用。往往需要我们通过多行代码才能实现。关键这些功能在多个页面都要使用。难道我们就只能这样多个页面都编写重复的吗？有没有一种可以共用的呢？答案是有的，这个就是我们今天要讲解的。搜索条件设计在开始之前我们先构想一下思路（毕竟代码是可变的，思路才是灵魂），有了好的思路可以方便我们代码的构建。
　　思路：
　　我们希望不要写很多个elformitem，把这些elformitem提取到一个公共的组件中，能让我们实现用最少的代码完成这些功能。
　　我们先看看传统的form表单（这里以elementui为例）在这个例子中，我们使用了大量的elformitem我们希望我们编写的组件可以解放这些templateelform：inlinetrue：modelformInlineclassdemoforminlineelformitemlabel关键词elinputvmodelformInline。userplaceholder请输入关键词elinputelformitemelformitemlabel城市elselectvmodelformInline。regionplaceholder请选择城市eloptionlabel上海valueshanghaieloptioneloptionlabel北京valuebeijingeloptionelselectelformitemelformitemelbuttontypeprimaryclickonSubmit查询elbuttonelformitemelformtemplate
　　下面开始搜索组件的编写
　　在srccomponents下创建FilterForm。vue组件FilterForm。vuetemplateelform：modelsearchData：inlineinline！显示表达数据elformitem：keyindexvfor（vo，index）ofdata：labelvo。label！inputelinputvifvo。typeinputvmodelsearchData。keyword：placeholdervo。placeholderelinput！selectelselectvifvo。typeselectvmodelsearchData。category：placeholdervo。placeholdereloptionvforvalinvo。selectOptions：keyval。value：labelval。label：valueval。valueeloptionelselectelformitem！其他自定义表单slotnameFilterFormslotelformtemplate
　　以上就是我们的主体部分了，下面我们就来看看怎么使用吧。
　　我们在srchome。vue页面引入html部分FilterForm：datasearchItem：searchDatasearchData：inlinetrue！这里为我们自定义的数据，没有自定义的时候可以不写templatevslot：FilterFormelinputplaceholder请输入关键词templateFilterFormscript引入组件importFilterFormfromcomponentsFilterForm。vue；注册使用exportdefault｛components：｛FilterForm｝，data（）｛return｛searchData：｛keyword：，category：｝，这里需要注意一下，我们大部分的时候，我们的查询条件都是动态的，我们可以在setup中负值searchItem：〔｛label：关键词，name：keyword，type：input，placeholder：请输入关键词，｝，｛label：类型，name：category，type：select，placeholder：请输入选择，selectOptions：〔｛value：shanghai，label：Zoneone｝，｛value：beijing，label：Zonetwo｝〕｝，〕，｝｝，｝
　　这样我们的搜索组件就已经完成了。下面我们就可以使用最少的代码进行组件的调用了。下一章我们一起完成table组件的编写。让我们的table简单。
　　每天学习一点，进步一点。加油