elementUI表单二次封装

<template>
  <div>
    <el-form ref="searchForm" size="small" :rules="rules" :model="searchData">
      <el-row type="flex">
        <el-col v-for="item in searchForm" :key="item.prop" :span="item.span||8">
          <el-form-item :label="item.label" :prop="item.prop">
            <!-- 输入框 -->
            <el-input
              v-if="item.type==='Input'"
              v-model="searchData[item.prop]"
              :placeholder="'请输入'+item.label"
            />
            <!-- 下拉框 -->
            <el-select
              v-if="item.type==='Select'"
              v-model="searchData[item.prop]"
              :placeholder="'请选择'+item.label"
              @change="item.change(searchData[item.prop])"
            >
              <el-option
                v-for="op in item.options"
                :key="op.value"
                :label="op.label"
                :value="op.value"
              />
            </el-select>
            <!-- 搜索下拉框 -->
            <search-select
              v-if="item.type==='Search'"
              v-model="searchData[item.prop]"
              field-type="search"
              :min-len="item.minilen||4"
              :search-method="search"
              :name="item.prop"
              :dict="'HandlerCode[matchfield=codecode]'"
              :label="item.label"
              @focus="getPostData(item.postData)"
            />
            <!-- 单选 -->
            <el-radio-group
              v-if="item.type==='Radio'"
              v-model="searchData[item.prop]"
            >
              <el-radio
                v-for="ra in item.radios"
                :key="ra.value"
                :label="ra.value"
              >{{ ra.label }}</el-radio>
            </el-radio-group>
            <!-- 日期 -->
            <el-date-picker
              v-if="item.type==='Date'"
              v-model="searchData[item.prop]"
              :type="item.pickerType"
            />
            <!-- 开关 -->
            <el-switch
              v-if="item.type==='Switch'"
              v-model="searchData[item.prop]"
            />
          </el-form-item>
        </el-col>
        <el-col>
          <el-button plain type="primary" size="small" @click="resetForm()">重 置</el-button>
          <el-button type="primary" size="small" @click="handle()">确 定</el-button>
        </el-col>
      </el-row>
    </el-form>

  </div>

</template>
<script>
import { getDict } from '@/api/dictDetail'
import SearchSelect from '@/components/SearchSelect'
export default {
  components: { SearchSelect },
  props: {
    searchForm: {
      type: Array,
      default: () => {
        return []
      }
    },
    searchData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      rules: {},
      parsed: {},
    };
  },
  beforeMount() {
    this.searchForm.map(item => {
      if (item.required) {
        this.$set(this.rules, item.prop, [{ required: true, message: item.label + '不能为空' }])
      }
    })
  },
  methods: {
    getPostData(val) {
      this.parsed = val;
    },
    search(params) {
      const queryParam = Object.assign({}, this.parsed)
      queryParam['codevalue'] = params.keyword
      return getDict(queryParam, params.pageNo, params.pageSize)
    },

    handle() {
      console.log(this.searchData);
      this.$refs['searchForm'].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs['searchForm'].resetFields();
    }
  }
}

</script>
<style scoped>

</style>

调用

<template>
  <div>

    <el-card>
      <div slot="header" class="clearfix">
        <span>查询条件</span>
      </div>
      <div>
        <search-form
          :search-data="searchData"
          :search-form="searchForm"
        />

      </div>
    </el-card>

  </div>
</template>
<script>
import SearchForm from './component/SearchForm.vue'
export default {
  name: 'Endorse',
  components: { SearchForm },
  props: [],
  data() {
    const sexs = [{ label: '男', value: 'M' }, { label: '女', value: 'F' }]
    const intersts = [{ label: '羽毛球', value: 'interst' }, { label: '篮球', value: 'basketball' }]
    return {
      searchData: {
        name: 'asd',
        age: null,
        sex: null,
        interst: null
      },
      searchForm: [
        { required: false, type: 'Input', label: '姓名', prop: 'name', span: 16 },
        { required: true, type: 'Input', label: '年龄', prop: 'age' },
        { required: true, type: 'Select', prop: 'sex', label: '下拉', options: sexs, change: this.changea },
        { required: true, type: 'Radio', prop: 'interst', label: '单选', radios: intersts },
        { required: true, type: 'Date', prop: 'interst1', label: '日期-year', pickerType: 'year' },
        { required: true, type: 'Date', prop: 'interst2', label: '日期-month', pickerType: 'month' },
        { required: true, type: 'Date', prop: 'interst3', label: '日期-date', pickerType: 'date' },
        { required: true, type: 'Date', prop: 'interst4', label: '日期-week', pickerType: 'week' },
        { required: true, type: 'Date', prop: 'interst5', label: '日期-datetime', pickerType: 'datetime' },
        { required: true, type: 'Switch', prop: 'interst6', label: '开关Switch' },
        { required: true, type: 'Search', prop: 'interst7', label: '搜索下拉', postData: { riskcode: '0101', codeType: 'search', comcode: '002' }},
      ],

    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {},
  methods: {
    changea(res) {
      console.log(res)
    },

  },
}
</script>

<style scoped>
.view-container {
  margin: 15px;
}
</style>