Element-ui el-form二次封装 数据无法重置问题

原链接：https://www.cnblogs.com/xingguozhiming/p/10674104.html

在此基础上做了补充

效果：

表格代码：

<!-- 搜索表单 -->
<template>
  <div class="ces-search">
    <el-form ref="editForm" :model="searchData" :size="size" inline :label-width="labelWidth">
      <el-form-item v-for="item in searchForm" :key="item.label" :label="item.label" :prop="item.prop">
        <!-- 输入框，改变事件 -->
        <!-- <el-input
          v-if="item.type==='input'"
          v-model="searchData[item.prop]"
          :size="size || item.size"
          :style="{width:item.width}"
          :placeholder="item.placeholder"
          :disabled="item.disable && item.disable(searchData[item.prop])"
          @change="item.change(that,searchData[item.prop])"
        /> -->
        <!-- 无事件 -->
        <el-input
          v-if="item.type==='input'"
          v-model="searchData[item.prop]"
          :size="size || item.size"
          :style="{width:item.width}"
          :placeholder="item.placeholder"
          :disabled="item.disable && item.disable(searchData[item.prop])"
        />
        <!-- 下拉框 -->
        <el-select
          v-if="item.type==='select'"
          v-model="searchData[item.prop]"
          :size="size || item.size"
          :style="{width:item.width}"
          :placeholder="item.placeholder"
          :disabled="item.disable && item.disable(searchData[item.prop])"
          @change="item.change(that,searchData[item.prop])"
        >
          <el-option v-for="op in item.options" :key="op.value" :label="op.label" :value="op.value" />
        </el-select>
        <!-- 单选 -->
        <el-radio-group
          v-if="item.type==='radio'"
          v-model="searchData[item.prop]"
          :style="{width:item.width}"
          :size="size || item.size"
          :disabled="item.disable && item.disable(searchData[item.prop])"
          @change="item.change(that,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-radio-group
          v-if="item.type==='radioButton'"
          v-model="searchData[item.prop]"
          :style="{width:item.width}"
          :size="size || item.size"
          :disabled="item.disable && item.disable(searchData[item.prop])"
          @change="item.change && item.change(that,searchData[item.prop])"
        >
          <el-radio-button v-for="ra in item.radios" :key="ra.value" :label="ra.value">{{ ra.label }}</el-radio-button>
        </el-radio-group>
        <!-- 复选框 -->
        <el-checkbox-group
          v-if="item.type==='checkbox'"
          v-model="searchData[item.prop]"
          :style="{width:item.width}"
          :size="size || item.size"
          :disabled="item.disable && item.disable(searchData[item.prop])"
          @change="item.change(that,searchData[item.prop])"
        >
          <el-checkbox v-for="ch in item.checkboxs" :key="ch.value" :label="ch.value">{{ ch.label }}</el-checkbox>
        </el-checkbox-group>
        <!-- 日期 -->
        <el-date-picker
          v-if="item.type==='date'"
          v-model="searchData[item.prop]"
          :style="{width:item.width}"
          :placeholder="item.placeholder"
          :size="size || item.size"
          :disabled="item.disable && item.disable(searchData[item.prop])"
          @change="item.change(that,searchData[item.prop])"
        />
        <!-- 时间 -->
        <el-time-select
          v-if="item.type==='time'"
          v-model="searchData[item.prop]"
          type=""
          :style="{width:item.width}"
          :placeholder="item.placeholder"
          :size="size || item.size"
          :disabled="item.disable && item.disable(searchData[item.prop])"
          @change="item.change(that,searchData[item.prop])"
        />
        <!-- 日期时间 -->
        <el-date-picker
          v-if="item.type==='dateTime'"
          v-model="searchData[item.prop]"
          type="datetime"
          :style="{width:item.width}"
          :placeholder="item.placeholder"
          :size="size || item.size"
          :disabled="item.disable && item.disable(searchData[item.prop])"
          @change="item.change(that,searchData[item.prop])"
        />
        <!-- 滑块 -->
        <!-- <el-slider v-if="item.type==='Slider'" v-model="searchData[item.prop]"></el-slider> -->
        <!-- 开关 -->
        <el-switch
          v-if="item.type==='switch'"
          v-model="searchData[item.prop]"
          :size="size || item.size"
          :style="{width:item.width}"
          :disabled="item.disable && item.disable(searchData[item.prop])"
          @change="item.change(that,searchData[item.prop])"
        />
      </el-form-item>
    </el-form>
    <el-form v-if="isHandle" inline>
      <el-form-item v-for="item in searchHandle" :key="item.label">
        <el-button :type="item.type || type" :size="item.size || size" @click="item.handle(that)">{{ item.label }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    that: { type: Object, default: this },
    isHandle: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    type: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'mini'
    },
    searchForm: {
      type: Array,
      default: () => []
    },
    searchHandle: {
      type: Array,
      default: () => []
    },
    searchData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {

    }
  },
  methods: {
    // 清空表单
    resetForm() {
      this.$nextTick(() => {
        this.$refs.editForm.resetFields()
      })
    }
  }
}

</script>

<style lang='scss' scoped>
.ces-search {
   .el-form {
     .el-form-item {
      margin-bottom: 5px;
    }
  }
}
</style>

之前并未在el-form-item 指定:prop="item.prop"

父组件调用

<template>
  <div class="ces-main">
    <!-- 搜索 -->
    <yec-search
      ref="searchForm"
      :that="that"
      label-width="50px"
      :search-data="searchData"
      :search-form="searchForm"
      :search-handle="searchHandle"
    />
</template>
<script>
import yecSearch from '@/components/Form/SearchForm/index.vue'
import { userData, userData1 } from './mock'

import { editForm, searchForm, tableCols, searchHandle, tableHandles, tablePage, editRules, modalCfg, modalCfgEdit, searchData, editData } from './config'

export default {
  components: { yecSearch},
  data() {
    return {
      that: this,
      searchData,
      searchForm,
      searchHandle,
      isSearch: false
    }
  },
  // 筛选数据
  computed: {
    // 模糊搜索
    datas() {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      return this.tableData
    }
  },
  // 初始化数据,数据未挂载到模板中/
  created() {
    this.getData()
  },
  methods: {

    /* 查询数据列表 */
    getData() {
      // 搜素按钮
      if (this.isSearch) {
        const search = this.searchData
        console.log('name:' + search.name)
        if (search.name.length === 0) {
          this.tableData = userData
        } else { // 有搜索条件
          this.tableData = userData1
        }
      } else {
        this.tableData = userData
      }
      // TODO 获取后端数据，目前连接mock.js
      this.tablePage.total = this.tableData.length
    },
    // 条件查询
    getFilterData() {
      this.isSearch = true
      // 调用改变事件
      this.getData()
    },
    // 重置表格
    resetData() {
      this.$refs.searchForm.resetForm()// 调用子组件清空方法
    }
  }

}
</script>