快捷導(dǎo)航

vue+element自定義查詢組件

更新時間：2021年09月29日 08:54:02 作者：吳維煒

這篇文章主要為大家詳細介紹了vue+element自定義查詢組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文主要介紹vue項目，在引入element的前提下，對組件進行二次封裝實現(xiàn)通過配置項直接布局。

一、查詢條件組件化

結(jié)合EventBus.js的使用，傳遞事件更高效，可以避免各種復(fù)雜的生命周期依賴關(guān)系。
在components/dataForm文件夾下dataForm.vue作為組件集合的載體，并創(chuàng)建配置項

1.1 dataForm代碼實例

// dataForm.vue
<template>
  <el-row>
    <input-form v-for="(item,index) in options" :key="'dataForm_'+index"> 
      <!-- 輸入框-->
      <input-form
        :key="index"
        v-if="item.type == 'input'"
        :data='item'
      ></input-form>
  </el-row>
</template>
<script>
import EventBus from "@/assets/js/eventBus.js"
import InputForm "@/components/dataForm/InputForm"
export default {
  components: {
    InputForm,
  },
  props: {
    /**
     * 表單配置項
     * @param {Object} option 配置參數(shù)，具體如下:
     * type: 表單項類型，String， 可選值input
     */
    options: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
   return {}
  },
  created() {
   // 此處主要是為了實現(xiàn)下拉框?qū)ζ渌咏M件的顯示和隱藏
    EventBus.$on("refreshDataForm", e => {
      this.refreshDataForm(e);
    });
  },
  // 頁面銷毀 事件銷毀
  beforeDestroy() {
    EventBus.$off("refreshDataForm")
    EventBus.$off("handleClick")
  },
  methods: {
   // 更新表單數(shù)據(jù)
    refreshDataForm(item) {
      let data = this.options
      data.forEach((e, i) => {
        if (item.type == e.type && item.name == e.name) {
          this.options[i] = item
        }
      })
    },
    // 子組件點擊事件響應(yīng)父組件,數(shù)據(jù)傳遞
    handleClick(data) {
     EventBus.$emit("handleClick",data)
    },
    // 表單數(shù)據(jù)格式化 (可以對是否必填項目做必填校驗)
    getDataForm() {
     let data = this.options
     let formObj = {}
     let error = ''
     try {
      data.forEach(e => {
       if (e.type === ''input) {
        if (e.require && !e.content) {
         error = '請輸入' + e.label
         throw error
        }
        formObj[e.name] = e.content
       } else if (e.type === 'select' || e.type === 'dataSelect') {
        if (e.require && !e.content) {
         error = '請選擇' + e.label
         throw error
        }
        formObj[e.name] = e.content
       } else if (e.type === 'date' || e.type === 'dataRadio') {
        if (e.require && !e.content) {
         error = '請選擇' + e.label
         throw error
        }
        formObj[e.beginName] = e.beginRegTime
        formObj[e.endName] = e.endRegTime
       } else if (e.type === 'image') {
        formObj[e.name] = e.file || e.content
       } else if (e.type === 'upload') {
        formObj[e.name] = e.file || e.content
        if (e.delFileName) { // 刪除附件集合及自定義名稱和默認名稱
          formObj[e.delFileName] = e.delFileIds.join(',')
        } else {
         formObj['delFileName'] = e.delFileIds.join(',')
        }
       }
      })
      return formObj
     } catch (error) {
      this.$message({ message:error, type: 'error'})
     }
    }
  }
}

1.2 子組inputForm.vue

注：此處被引用的組件也可以被頁面單獨引用

<template>
  <el-col>
    <el-col :span="data.boxSpan?data.boxSpan:boxSpan" v-if="!data.isHide">
     <el-col :span="data.infoSpan?data.infoSpan:infoSpan" >
      <el-col :span="data.infoSpan?data.infoSpan:infoSpan" v-if="data.labelSpan!=0">
       <label class="el-form-item_label" :class="{'require': data.require}" v-html="data.label"></label>
      </el-col>
      <el-col :span="data.contentSpan?data.contentSpan:contentSpan" v-if="data.contentSpan!=0">
       <el-input :class="{'base_textarea': data.textarea}" v-modle.trim="data.content" :type="data.textarea?'textarea':''" :disable="data.readOnly" :placeholder="setPlaceholder" maxlength="200"></el-input>
      </el-col>
     </el-col>
      <span v-text="title"></span>
    </div>
  </el-col>
</template>
<script>
export default {
 props: {
  // 類型 input 輸入框
  type: {
   type: String,
   default: 'input'
  },
  // 默認柵欄布局 8/24
  boxSpan: {
   type: Number,
   default: 8
  },
  // 默認柵欄布局 24/24
  infoSpan: {
   type: Number,
   default: 24
  },
  // 默認柵欄布局 8/24
  spanSpan: {
   type: Number,
   default: 8
  },
  // 默認柵欄布局 16/24
  contentSpan: {
   type: Number,
   default: 16
  },
  /**
  * name 關(guān)鍵字
  * type 表單類型
  * label 表單標(biāo)題
  * content 表單內(nèi)容
  * readOnly 是否只讀 默認否
  * isHide 是否隱藏 默認否
  * textarea 是否文本類型 默認否
  **/
  data: {
   type: Object,
   default() {
    return []
   }
  }
 },
 computed: {
  setPlaceholder() {
   if(this.data.readOnly && !this.data.content) {
    return ''
   } 
   return '請輸入'
  }
 }
}
</script>
<style scoped>
 // 必填樣式
 .require::after {
  content: '*';
  color:red;
 }
 // flex布局標(biāo)題垂直居中
 .el-form-item__label {
  float:right;
  margin-botton:0;
  line-height: 20px;
  display: flex;
  align-items: center;
  min-height: 40px;
 }
</style>

1.3 父頁面引用及使用

<template>
  <el-row>
    <data-form :options='searchArray' ref='searchArray'></input-form>
  </el-row>
</template>

<script>
 import EventBus from "@/assets/js/eventBus.js"
 import DataForm "@/components/dataForm/dataForm"
 export default {
  components: {
   DataForm
  },
  data() {
   return {
    // 查詢菜單配置
    searchArray: [
     {
      name: 'personName',
      type: 'input',
      label: '用戶名',
      content: ''
     },
     {
      name: 'personName2',
      type: 'input',
      label: '用戶名2',
      content: ''
     }
    ]
   }
  },
  created() {
   // 監(jiān)聽子組件傳參
   EventBus.$on('refreshDataForm', e => {
    this.refreshDataForm(e)
   })
  },
  destroyed() {
   // 銷毀子組件傳參監(jiān)聽
   EventBus.$off('refreshDataForm')
  },
  methods: {
   // 監(jiān)聽子組件操作
   refreshDataForm(e) {
    // 邏輯代碼
    this.$forceUpdate()
   },
   // 數(shù)據(jù)查詢
   handleQuery() {
     // 獲取組件參數(shù)返回json格式
    let searchArray = this.$refs.searchArray.getDataForm()
    // 如果存在必填項，返回值為null，此時有彈窗提示
    if (!searchArray) {
     return 
    }
    // 查詢接口邏輯
   }
  }
 }
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: