封装element ui的table组件,element-ui组件库

　　本文主要介绍如何基于element-ui一步步封装查询组件的相关信息。本文通过实例代码非常详细，对你学习或者使用vue.js有一定的参考价值，有需要的朋友可以参考一下。

功能

　　然后上一篇文章封装了一个更好的基于element-ui框架的表格组件，我们开始编写查询组件。查询组件需要什么？我在下面画了一个大概的原型，基本描述了查询组件需要实现的功能。

　　[输入条件，选择下拉数据，点击查询]的基本查询功能

　　添加查询下拉面板【如果有很多查询，需要给更多的查询下拉面板，去掉默认查询条件，放下下拉面板，放几个具体的默认查询条件，可以通过传入的参数控制】

　　添加条件显示[如果有更多的查询面板，如果不打开查询面板，就不清楚数据是根据哪些条件找到的。]

　　添加功能按钮区【一般放置功能按钮进行批量操作，如添加、删除、更改等】

基本的查询功能

　　查询功能需要用element-ui的输入框、下拉框、日期框等组件来实现。如果我们使用我们的组件，我们希望使用一个数组来描述这个查询条件，然后组件将根据数组来识别和呈现条件。首先，我们必须定义这个数组是什么样子的。

　　//方法

　　initSearch () {

　　const searchArr=this.searchArr

　　if (searchArr searchArr.length) {

　　让searchForm={}

　　searchArr.forEach((val)={

　　searchForm[val.key]=

　　})

　　this.searchForm=searchForm

　　}

　　//已安装

　　已安装(){

　　this.initSearch()

　　目前这三个字段是最基本的，代码注释中已经明确说明了这些字段的含义。在back对象中可能会扩展一些其他字段。比如下拉数据通常是通过后台接口发送到前端的。我们可以在这里添加一个url、param和method来定义接口的名称、参数和请求方法。当然，后面实施的时候再说。那我们开始开发吧。

查询条件初始化

　　在我们从外部导入searchArr数据之后，我们必须首先遍历它，并为内容定义的查询条件searchForm设置响应数据。

　　//方法

　　initSearch () {

　　const searchArr=this.searchArr

　　if (searchArr searchArr.length) {

　　让searchForm={}

　　searchArr.forEach((val)={

　　searchForm[val.key]=

　　})

　　this.searchForm=searchForm

　　}

　　//已安装

　　已安装(){

　　this.initSearch()

渲染页面

　　因为我们设计的查询页面有两部分，包括对外显示的查询条件和更多的查询条件显示。在这种情况下，如果我们在模板中定义结构，我们会发现我们需要写两次重复的代码。如果以后扩展新的功能，那将是一项艰苦的体力工作。所以我们会在这里的render函数里写jsx，这样结构会更灵活，代码可以更好的重用。想法完成后，我们就开始写代码。

　　//props在searchArr数组中传递描述查询条件是什么。

　　/**

　　*查询条件的描述

　　searchArr: {

　　类型：数组，

　　默认值：()=[]

　　//data定义了两个变量，searchForm:传递到后台的查询字段，selectOption:下拉数据。

　　搜索表单：{}，

　　选择选项：{}

　　//安装的初始化数据

　　initSearch () {

　　const searchArr=this.searchArr

　　if (searchArr searchArr.length) {

　　让searchForm={}

　　searchArr.forEach((val)={

　　搜索表单[val。__key]= //取出用户自定义字段，放入搜索表单，然后赋一个空字符串。

　　this.setOption(val) //如果是下拉数据的话，去把下拉的列表赋值一下放到选择选项里边

　　})

　　this.searchForm=searchForm

　　}

　　//方法设置下拉数据

　　异步设置选项(瓦尔){

　　if (~[select ， mulSelect ).的索引(值.__type)) {

　　//第一种情况如果下拉数据是本地写死的

　　如果(val。数据数组。是数组(val。数据)){

　　这个. set(this.selectOption，val .__key，val.data)

　　} else if (val.fetchUrl) {

　　//第二种情况，如果下拉数据是从后台接口传递过来的数据

　　常量结果=等待请求({

　　网址：val.fetchUrl，

　　方法：val.method post

　　})

　　如果(结果结果。数据结果。数据。成功){

　　这个. set(this.selectOption，val .__key，result.data.list [])

　　}

　　好的，我们完成初始化工作后，就可以在进行渲染工作了，前面我们说到，我们采用提出函数里边写小艾会更灵活一点，那么我们开始写这部分的工作吧。

　　//渲染函数

　　div class=搜索表

　　埃尔格式

　　inline={true}

　　props={ { model:这个。搜索表单} }

　　ref=searchForm

　　class=searchForm

　　{

　　searchArr.map((o)={

　　返回组件[o.__type]？组件[o.__type](h，o，this):

　　})

　　}

　　埃尔-表单-项目

　　El-button size= small type= primary icon= El-icon-search on-click={ query table }查询/el-button

　　埃尔-表单-项目

　　el-link

　　style= margin-left:10px；

　　type=primary

　　下划线={ false }

　　on-click={ ()={ this.moreShow=！this.moreShow } }更多查询

　　/el-link

　　/El-表单-项目

　　div class=更多-搜索动画

　　class={ this.moreShow？fadeInDown : fadeOutUp }

　　v-show={ this.moreShow }

　　//.更多查询

　　/div

　　/el格式

　　/div

　　在小艾中操作有个地方值得注意一下，在最新的脚手架中，是已经支持了在小艾中使用v型车等指令，但是元素-用户界面中的埃尔输入使用会报错，下方使用的虚拟展示指令就可以用的。但是其实v型车也只是一个语法糖而已，我们这里就使用投入事件拿到最新的输入数据，然后再赋值给搜索表单。这段代码是抽离出来了的，因为外部显示的查询条件和收缩的查询条件都得用到它，抽离出来后，就不用写重复的逻辑了。以下是抽离的成分组件

　　/**

　　* 输入框为什么抽离？这里我们只是做表格查询需要。

　　* 其实如果要封装弹窗框那种表单提交组件。也可以复用这里的逻辑

　　* @param { Function } h vue提供的h函数

　　* @param { Object }项目用户写入的描述对象

　　* @param { Object } vm vue实例

　　export const input=function (h，item，vm) {

　　const { searchForm }=vm

　　返回（

　　el-form-item label={item.label}

　　埃尔输入

　　大小=小

　　on-input={(v)={ searchForm[item .__key]=v }}

　　道具={{

　　值：searchForm[item .__key]，

　　占位符：输入内容信息，

　　.项目

　　}}

　　/el-input

　　/El-表单-项目

　　)

　　}

　　/**

　　* @param { Function } h vue提供的h函数

　　* @param { Object }项目用户写入的描述对象

　　* @param { Object } vm vue实例

　　export const select=function (h，item，vm) {

　　常数{

　　searchForm={}，

　　selectOption={}，

　　}=虚拟机

　　/**

　　* 监听下拉改变事件

　　* @param { String Number 布尔值}值选择下拉数据的值

　　* @param { Object }值

　　const select change=function(value，item) {

　　搜索表单[item .__key]=值

　　虚拟机.$emit(on-change ，值)

　　}

　　返回（

　　el-form-item label={item.label}

　　埃尔-选择

　　道具={{

　　值：searchForm[item .__key]，

　　占位符："===请选择===,

　　可过滤：真，

　　可清除：真的，

　　.项目

　　}}

　　on-change={(val)={ select change(val，item) } }

　　大小=小

　　{

　　选择选项[项目selectOption[item .__key].map((o)={

　　返回（

　　埃尔选项

　　key={ o.value }

　　label={ o.text }

　　value={ o.value }

　　/el选项

　　)

　　})

　　}

　　/el-select

　　/El-表单-项目

　　)

　　}

　　/**

　　* 多选的下拉框，可以再单选基础上加上两个属性，写一个这个方法，用户可以稍微少些几个单词。

　　* @param { Function } h vue提供的h函数

　　* @param { Object }项目用户写入的描述对象

　　* @param { Object } vm vue实例

　　export const mulSelect=function(h，item，vm) {

　　项目[多个]=真

　　项目[折叠标签]=真

　　返回选择(h，项目，虚拟机)

　　}

　　以上其实就是把元素的几个组件抽离成独立的方法，我们在外边组件使用的时候，就能直接根据用户传递的类型，匹配到对应的组件渲染了。并且后边要增加新的查询组件的话，只要在这里扩展就行，不用修改其他地方。更容易维护。另外我们在组件内部默认一些行为，比如默认下拉可以搜索，默认有清空按钮等，如果系统不需要的话，也可在searchArr去写上对应属性覆盖。

　　返回组件[o.__type]？组件[o.__type](h，o，this):

　　基本的渲染就写好了，然后我们在外边使用组件

　　searchArr: [

　　{

　　_ _类型："输入",

　　标签: 姓名，

　　_ _键："名称"

　　{

　　_ _类型：选择，

　　标签: 性别，

　　_ _关键字："性",

　　fetchUrl:"/get select "，

　　方法："发布"

　　//数据：[

　　//{ text:男，值："1"},

　　//{ text:女，值："0"},

　　//]

　　]

　　写上对应的模拟的数据

　　Mock.mock(/\/getSelect/， post ，()={

　　返回{

　　状态：200,

　　成功：真的，

　　消息：获取成功，

　　列表：[

　　{

　　文本：男人，

　　值："1"

　　{

　　文本：女人，

　　值："2"

　　}

　　总计：数据。列表。长度

　　}

　　})

　　好吧，以上就简单的把条件通过数组描述的方式渲染出来了。接下来，我们得做更多查询面板的查询条件。

下拉组件联动查询

　　比如我们需要用我们的查询组件写三级联动，应该怎么实现？

　　选择省份后，需要根据选择的省份加载相应的城市下拉数据。

　　如果删除一个省，需要清除对应省市的下拉。

　　联动主要是做好这两个功能。一个是加载相应的数据，一个是清空相应的数据。好了，知道了需要做什么，就开始做吧。

　　{

　　_ _类型：选择，

　　_ _关键字：“省”，

　　_ _ fetchUrl:“/get province”，

　　_ _方法：“get”，

　　__nextKey:城市，

　　_ _ next fetch:“/get city”，

　　__nextParam: [province]，

　　__nextMethod: get ，

　　__emptyArr: [城市，地区]，

　　标签:“省份”，

　　标签宽度：“40px”，

　　{

　　_ _类型：选择，

　　__key:“城市”，

　　_ _方法：“get”，

　　__nextKey:区，

　　_ _ next fetch:“/get district”，

　　__nextParam: [省，城市]，

　　__nextMethod: get ，

　　__emptyArr: [district]，

　　标签:“城市”，

　　标签宽度：“40px”，

　　{

　　_ _类型：选择，

　　__key:“区”，

　　标签:“区域”，

　　标签宽度：“40px”，

　　}

　　要获取省级数据，其实只要写__fetchUrl: /getProvince 和__method: get 定义请求接口来获取下拉数据即可。然后，当选择省下拉菜单时，我们需要根据在更改事件中选择的省请求数据。这个时候，我们需要定义在数据发生变化时，我们需要做什么。代码如下：

　　__nextKey: city ，//哪个下拉数据被赋值？

　　_ _ next fetch:“/get city”，//赋值的请求接口。

　　__nextParam: [province]，//请求参数

　　__nextMethod: get ，//请求方法

　　_ _ emptyarr: [city ， district ]//修改下拉数据时，需要清除哪些下拉类别？

　　/**

　　*监控下拉变化事件。

　　* @ param { string number boolean } value选择下拉数据的值。

　　* @param { Object }值

　　const selectChange=异步函数(值，项){

　　searchForm[item。__key]=值

　　//清空下拉列表和下拉数据

　　如果(item item。__emptyArr) {

　　for(设I=0；一项。_ _ empty arr . length；i ) {

　　let key=item。__emptyArr[i]

　　if(选择选项[键]) {

　　selectOption[key]=[]

　　}

　　vm。$set(searchForm，key，)

　　}

　　如果(item item。__nextFetch项目。__nextParam) {

　　设param={}

　　for(设j=0；j项。_ _ nextParam.lengthj ) {

　　let value=searchForm[item。__nextParam[j]]

　　如果(值){

　　param[item。__nextParam[j]]=value

　　}

　　const res=await请求({

　　url:项目。__nextFetch，

　　方法：项目。__nextMethod post

　　}，param)

　　if (res) {

　　设{ data }=res

　　if (data data.success) {

　　vm。$set(selectOption，item。__nextKey，data.list)

　　}

　　vm。$emit(on-change ，值)

　　}

　　好了，这就基本完成了三级联动的功能。以下是效果图

组件扩展

　　组件扩展非常简单。如果我们仍然缺少一些必需的组件，我们可以直接在components.js中添加一个

　　/**

　　*日期选择器

　　* @param {*} h

　　* @param {*}项目

　　* @param {*}虚拟机

　　导出常数日期=函数(h，item，vm) {

　　const { searchForm }=vm

　　返回(

　　el-form-item标签={item.label}标签宽度={item.label宽度}

　　El-日期选择器

　　on-input={(v)={ searchForm[item。__key]=v }}

　　道具={{

　　类型：“日期”，

　　大小：“小”，

　　值：searchForm[item。__key]，

　　占位符：选择日期，

　　.项目

　　}}

　　/El-日期选择器

　　/El-表单-项目

　　)

　　}

　　//searchArr在使用时添加

　　{

　　_ _类型：“日期”，

　　_ _键：“生日”，

　　标签:“生日”

　　}

　　新查询条件类型的添加无需在其他地方进行修改即可完成。这是效果

搜索条件展示

　　搜索条件功能很简单，就是用户点击搜索后，显示输入的条件。我们将它作为一个独立的小部件分离出来

　　query-info ref= query info on-remove={ this . remove tag } selection option={ this . select option }/query-info

　　该组件过去被传递到下拉数组中。我们在设计它的时候说过，它也可以点击十字删除条件，所以我们不得不抛出一个remove自定义事件。删除条件后，我们清除条件，然后调用查询方法。在查询时，我们将搜索条件传递给组件，并让它显示出来。这里需要注意的是，我们不能通过props直接将搜索条件导入到组件中。如果是，因为数据是有反应的，所以当你输入条件的时候会显示在底部，这不是我们想要的效果。我们想要的是当我们单击查询按钮时显示正在查询的查询条件。所以在这里，我们是在查询按钮方法。直接调用其内部方法将条件传入过去，然后在内部使用JSON.parse(JSON.stringify(val))实现深度复制，从而将数据与外部数据隔离开来。

　　removeTag (name) {

　　this.searchForm[name]=

　　this.queryTable()

　　}

　　//查询

　　queryTable () {

　　这个。$refs.queryInfo this。$ refs . query info . query table(this . search form)

　　this.moreShow=false

　　这个。$emit(search ，this.searchForm)

　　}

　　这些组件的实现如下：

　　模板

　　div class=" query info "

　　el-tag

　　v-for=标记中的标记

　　:key=tag

　　可关闭的

　　style= margin-right:10px；

　　@close=close(tag)

　　/el-tag

　　/div

　　/模板

　　脚本

　　从“@/utils/utils”导入{ getTitle }

　　导出默认值{

　　道具：{

　　//下拉数据

　　选择选项：{

　　类型：对象，

　　默认值：()=[]

　　}

　　data () {

　　返回{

　　//查询条件

　　搜索表单：{}

　　}

　　计算值：{

　　///计算输入条件的数组

　　标签:function () {

　　let tags=[]

　　let keys=object . keys(this . search form)

　　keys.forEach((key)={

　　if (this.searchForm[key]) {

　　tags.push(按键)

　　}

　　})

　　返回标签

　　}

　　方法：{

　　//点击关闭

　　关闭(标签){

　　this.searchForm[tag]=

　　这个。$emit(remove ，标记)

　　//外部调用的方法

　　查询表(搜索表单){

　　this . search form=JSON . parse(JSON . stringify(search form))

　　//显示名称。如果是下拉数据，转到下拉数据匹配名称并显示。

　　显示名称(键){

　　让value=this.searchForm[key]

　　if (this.selectionOption[key]) {

　　返回getTitle(value，this.selectionOption[key])

　　}否则{

　　返回值

　　}

　　/脚本

　　样式范围。查询信息{

　　边距-底部：10px

　　}

　　/风格

　　取得的效果如下：

添加功能按钮区

　　这是当前通过插槽添加到searchTable组件中的。

　　div class=右

　　{这个。$slots.rightButton}

　　/div

　　//使用

　　search-table:search arr= search arr @ search= search

　　模板v形槽：右按钮

　　el按钮

　　size=小

　　type=成功

　　@ click=()={ messagebox({ message: under development ，type: warning })}

　　增加

　　/el-button

　　/模板

　　/搜索-表格

　　复制代码

　　效果：

写在最后

　　到目前为止，查询组件想要实现的一些功能都一一实现了。其实做起来并不复杂，最重要的一点是想清楚了再做。后面我们会完成动态头，然后大致完成表格的相关要求。

　　你也可以给我们的开源项目一颗小星星：http://github.crmeb.net/u/defu非常感激！

　　关于如何基于element-ui逐步打包查询组件的文章到此结束。有关element-ui包查询组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

封装element ui的table组件,element-ui组件库

目录

功能

基本的查询功能

查询条件初始化

渲染页面

更多查询以及展示优化

下拉组件联动查询

组件扩展

搜索条件展示

添加功能按钮区

写在最后

相关文章阅读