vue+element自定义查询组件

// 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 配置参数，具体如下:     * type: 表单项类型，String， 可选值input     */    options: {      type: Array,      default() {        return [];      },    },  },  data() {   return {}  },  created() {   // 此处主要是为了实现下拉框对其他子组件的显示和隐藏    EventBus.$on("refreshDataForm", e => {      this.refreshDataForm(e);    });  },  // 页面销毁 事件销毁  beforeDestroy() {    EventBus.$off("refreshDataForm")    EventBus.$off("handleClick")  },  methods: {   // 更新表单数据    refreshDataForm(item) {      let data = this.options      data.forEach((e, i) => {        if (item.type == e.type && item.name == e.name) {          this.options[i] = item        }      })    },    // 子组件点击事件响应父组件,数据传递    handleClick(data) {     EventBus.$emit("handleClick",data)    },    // 表单数据格式化 (可以对是否必填项目做必填校验)    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'})     }    }  }}

<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 关键字  * type 表单类型  * label 表单标题  * content 表单内容  * 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布局标题垂直居中 .el-form-item__label {  float:right;  margin-botton:0;  line-height: 20px;  display: flex;  align-items: center;  min-height: 40px; }</style>

<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() {   // 监听子组件传参   EventBus.$on('refreshDataForm', e => {    this.refreshDataForm(e)   })  },  destroyed() {   // 销毁子组件传参监听   EventBus.$off('refreshDataForm')  },  methods: {   // 监听子组件操作   refreshDataForm(e) {    // 逻辑代码    this.$forceUpdate()   },   // 数据查询   handleQuery() {     // 获取组件参数返回json格式    let searchArray = this.$refs.searchArray.getDataForm()    // 如果存在必填项，返回值为null，此时有弹窗提示    if (!searchArray) {     return     }    // 查询接口逻辑   }  } }</script>