Vue + Element-UI管理系統中 Form查詢 二次封裝

本文封裝的組件是在Element-UI 的el-form 基礎之上封裝的。

 

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

<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、使用組件

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

　　

// 查詢配置項
      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