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

作者站长头像
站长
· 阅读数 11

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
    }
  },
回复
1个回答
avatar
test
2024-06-26

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

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()))

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容