vue之精准查询和模糊查询

之前做查询精准和模糊查询都是后台传值过来,最近接触了一个前端操作的方法,觉得很不错,下面将这个方法分享给大家,希望可以对你有所帮助!

示例:

在这里插入图片描述

<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="formInline.region" placeholder="活动区域">
      <el-option
        v-for="(item, index) in typeOptions"
          :key="index"
          :label="item.value"
          :value="item.code"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        },
        typeOptions: []
      }
    },
    methods: {
      onSubmit() {
       if (this.formInline.user) {
	       	let filters = [];
	          let user= this.tableSearchNode(
	              'user',
	              'like', // 模糊查询
	              [this.formInline.user],
	              'String'
	          );
	          filters.push([user]);
	      }
     if (this.formInline.region.length) {
                let tmpArr = [];
                for (let k = 0; k < this.formInline.region.length; k++) {
                    let region= this.tableSearchNode(
                        'region',
                        'eq', // 精准查询
                        [this.formInline.region[k]],
                        'String'
                    );
                    tmpArr.push(region);
                }
                filters.push(tmpArr);
            }
      }
      // 下面就调用你获取列表的接口就可以啦
    }
  }
</script>

总结

这个方法我就得很好,用起来很方便,想要精准查询就“eq”,想要模糊查询就用“like”,但是唯一一点不好就是,搜索的条件多了之后,代码比较多,其余都比较好,所以针对你的项目,择优处理,哪个方便适合,你就选哪个,在我看来,第一步目的是功能实现,其次才是代码的质量。

  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值