Vue + Element-UI管理系统中 Form查询 二次封装

本文封装的组件是在Element-UI 的el-form 基础之上封装的。

 

一.在components文件夹下，新建tableSearch文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148

<template>   <div class="app-container">     <el-collapse v-model="activeNames" @change="filterChange" class='collapse'>       <el-collapse-item name="1">         <template slot="title">           <span>{{showFilter?'收起筛选':'展开筛选'}}</span>           <div class="filter-item-search">             <el-button               v-for="(item,index) in form_config.operate"               :key="index"               :type="item.type"               size="small"               @click.stop="item.handleClick">               {{item.label}}             </el-button>           </div>         </template>         <el-form ref="form" :model="formInfo" :label-width="form_config.labelWidth" class="filter-main">           <template v-for="(value,key) in form_config.formItemList">             <el-row :key="key">               <template v-for="item in value">                 <el-col :span="6" :key="item.name">                   <template v-if="item.type=== 'text' ">                     <el-form-item :label="item.label">                       <el-input                         v-model="formInfo[item.name]"                          :clearable="item.clearable"                         :placeholder="item.placeholder"                       />                     </el-form-item>                   </template>                   <template v-if=" ['data', 'daterange', 'datetimerange', 'datetime'].indexOf(item.type) !== -1 ">                     <el-form-item :label="item.label">                       <el-date-picker                         v-model="formInfo[item.name]"                         :type="item.type"                         value-format="yyyy-MM-dd"                         @change="item.callback && item.callback(formInfo[item.name])"                         start-placeholder="开始时间"                         end-placeholder="结束时间"                         style="width:100%">                       </el-date-picker>                     </el-form-item>                   </template>                   <template v-if="item.type=== 'select' ">                     <el-form-item :label="item.label">                       <el-select                         v-model="formInfo[item.name]"                         :clearable="item.clearable"                         :multiple="item.multiple"                         :collapse-tags="item.collapseTags"                         :placeholder="item.placeholder"                         style="width:100%">                         <el-option v-for="ele in item.optList" :key="ele.value" :value="ele.value" :label="ele.label"/>                       </el-select>                     </el-form-item>                   </template>                 </el-col>               </template>             </el-row>           </template>         </el-form>       </el-collapse-item>     </el-collapse>   </div> </template>   <script> export default {   props: {     config: {       type: Object,       default: () => {}     },      formInfo: {       type: Object,       default: () => {}     }   },   data() {     return {       activeNames: ['1'],       showFilter: true,       form_config: {         labelWidth: '100px',         formItemList: {},         operate: []       }     }   },   watch: {     // 监听传过来的config，进行初始化     config: {       handler(newVal) {         if(newVal) {           this.initConfig()         }       },       immediate: true     }   },   methods: {     // 初始化配置     initConfig() {       for(let key in this.config) {         if(Object.keys(this.form_config).includes(key)) {           this.form_config[key] = this.config[key]         }       }     },     filterChange (val) {       if (val.length <= 0) {         this.showFilter = false       } else {         this.showFilter = true       }     }   } } </script>   <style scoped> .collapse >>> .el-collapse-item>div[role=tab] {   padding: 0 200px;   height: 50px;   position: relative;   border-top: 1px solid #ccc; } .collapse >>> .el-collapse-item__header{   width: auto!important;   border: 0;   float: right;   font-size: 14px;   color: #409EFF; } .collapse .filter-item-search {   position: absolute;   right: 60px; }   .filter-main{   padding: 30px;   background: #f3f4f9; } .collapse >>> .el-collapse-item__content{   padding-bottom: 10px; } </style>

 

二、使用组件

1、import TableSearch from '@/components/tableSearch';

2、注册组件components: { TableSearch }；

3、使用组件

?

1 2 3 4 5 6 7 8

<template>   <div>     <TableSearch       :config="form_config"       :formInfo="formInfo"     />   </div> </template>

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

// 查询配置项       form_config: {         labelWidth: '120px',         formItems: {           1: [             {               label: '姓名',               name: 'name',               type: 'text',               placeholder: '请输入姓名'             },             {               label: '时间',               name: 'time',               type: 'daterange',               callback: (data) => {                 console.log(data);               }             },             {               label: '角色',               name: 'role',               type: 'select',               clearable: true,               multiple: true,               collapseTags: true,               placeholder: '请选择角色',               optList: [                 {label:'一号选手',value:1},                 {label:'二号选手',value:2},                 {label:'三号选手',value:3}               ]             },             {               label: '状态',               name: 'status',               type: 'select',               clearable: true,               placeholder: '请选择状态',               optList: [                 {label:'停用',value:0},                 {label:'启用',value:1}               ]             },           ]         },         operate: [           {             label: '查询',             type: 'primary',             handleClick: this.handleSearch           },           {             label: '重置',             type: 'primary',             handleClick: this.handleReset           }         ]       }

 

三、参数说明　

form_config：查询配置项

参数	说明	类型	默认值
labelWidth	表单域标签的宽度	string	-
formItems	formItems：{1:[]}	object	{}
operate	操作项	array	[]

 

 

formItems

参数	说明	类型	默认值
label	标签文本	string	-
name	表单域 model 字段	string	-
type	类型（input、select、daterange等）	string	text
clearable	是否可清空	boolean	false
multiple	是否可多选	boolean	false
collapseTags	多选时是否将选中值按文字的形式展示	boolean	false
placeholder	占位符	string	-
optList	下拉框列表	array	[]

 

Methods

方法名	说明	参数
callback	回调函数	-
handleClick	操作方法	-

 

源码

如果你感兴趣的话，请前往 GitHub 查看源码和完整文档。

https://github.com/wangibook/my-table-component