VUE+ElementUI实现提交表单模糊查询功能

查询表单提交：

<el-form ref="elForm" :model="formData" size="medium" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="入库编号" prop="goodinid">
            <el-input
              v-model="formData.goodinid"
              placeholder="请输入"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">取消</el-button>
          </el-form-item></el-col
        >
      </el-row>
    </el-form>

提交表单调用的方法：

submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return
        // TODO 提交表单
      })
	//调用查找的方法
      this.autosearch()
    },

重置表单调用的方法：

resetForm() {
      this.$refs["elForm"].resetFields()
//考虑到可能查询后触发重置事件，所以把展示的table也重置为初始的数据
      this.searchlist = this.tableData
    },

table展示的页面（使用的数据源为searchlist）：

 <el-table
        ref="multipleTable"
        :data="searchlist"
        style="width: 100%"
      >
        <el-table-column prop="goodinid" label="入库编号" min-width="8%">
        </el-table-column>
 </el-table>

查找方法，这里使用的tableData是保存的所有数据，searchlist则是展示出的数据，在data（）都需要声明：

data() {
    return {
      formData: {
        goodinid: undefined,
      },
      tableData: [],
      searchlist: [],
    }
  },
methods:{
   autosearch() {
      this.searchlist = []
      //字符串方法indexOf
      for (let i = 0; i < this.tableData.length; i++) {
        //如果字符串中不包含目标字符会返回-1
        if (this.tableData[i].goodinid.indexOf(this.formData.goodinid) >= 0) {
          this.searchlist.push(this.tableData[i])
        } 
      }
      return this.searchlist
    },
 },