写了一个查询功能，但是每当匹配出符合条件的数组项后，在匹配其他条件原来的数据数组就会变成上一次匹配出的数组？

  • Z时代
  • 2024-02-26
  • 分类：IT

UI结构

<div class="search_prod">
    <div class="prod_form">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="产品码">
          <el-input
            v-model="formInline.sn"
            placeholder="请输入正确的产品码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="prod_content">
      <el-table
        :data="tableData"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          v-for="(item, i) in cols"
          :key="i"
          align="center"
          :prop="item.prop"
          :label="item.label"
        >
        </el-table-column>
      </el-table>

调用方法

onSubmit () {
      if (this.formInline.sn === '') return this.$message.warning('请输入产品码！')
      this.tableData = this.tableData.filter(data => data.bar_no.toLowerCase().includes(this.formInline.sn.toLowerCase()))
      console.log(this.tableData)
    },

数据源

 data () {
    return {
      formInline: {
        sn: ''
      },
      input: '',
      tableData: [],
      cols: [],
      currentPage: 1,
      pagesize: 4
    }
  },

回答：

期望每次都使用数据源过滤产生新的数据然后赋值给表格数据。
关键就在于这句，将过滤后的结果赋值给数据源了，数据源和表格数据糅合在一起了。

this.tableData = this.tableData.filter(data => data.bar_no.toLowerCase().includes(this.formInline.sn.toLowerCase()))

解决方案：

created(){
  // 从服务端获取数据
  this.originData = xxx
}
// ...
this.tableData = this.originData.filter(data => data.bar_no.toLowerCase().includes(this.formInline.sn.toLowerCase()))

这种查询类的筛选最好还是服务端做，数据量小可以前端做，一般是服务端返回不满足前端数据格式的时候前端对数据加工处理。

回答：

因为你每次都是使用this.tableData去筛减的，说明this.tableData一直在变少，你应该有一个变量保存所有数据，如allTableData，然后每次用这个变量去筛选数据

以上是 写了一个查询功能，但是每当匹配出符合条件的数组项后，在匹配其他条件原来的数据数组就会变成上一次匹配出的数组？ 的全部内容， 来源链接： utcz.com/p/935005.html

回到顶部