vue 多条件和模糊查询(已测试)

<div class="content">
    <div class="right">

      <select name="sex" width='100' v-model="formData.sex">
        <option value="" selected>请选择</option>
        <option value="1">男</option>
        <option value="2">女</option>
        <option value="3">不是人</option>
      </select>

      <input type="text" v-model="formData.phone" placeholder="电话(精准搜索)">

      <input type="text" v-model="formData.name" placeholder="姓名(模糊搜索)">

      <button @click="search(formData)">提交数据</button>
    </div>
    <div class="left">
      <ul>
        <li v-for="(item,index) in  realList" :key="index">
          {{item.name}} || {{item.phone}} || {{item.sex | filterSex}}
        </li>
      </ul>
    </div>
  </div>
export default {
  name: 'styleTest',
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        sex: '',
      },
      realList: [],
      list: [
        {
          name: '张址',
          phone: 18715023011,
          sex: 1,
        },
        {
          name: '张三',
          phone: 18715023012,
          sex: 2,
        },
        {
          name: '李四',
          phone: 18715023013,
          sex: 1,
        },
        {
          name: '赵武',
          phone: 18715023014,
          sex: 2,
        },
        {
          name: '晋南',
          phone: 18715023015,
          sex: 1,
        },
        {
          name: '张东',
          phone: 18715023016,
          sex: 2,
        },
      ],
    };
  },
  filters: {
    filterSex(val) {
      switch (val) {
        case 1:
          return '男';
          break;
        case 2:
          return '女';
          break;
        case 3:
          return '不是人';
          break;
        default:
          return '男';
      }
    },
  },
  computed: {
    // realList() {
    //   let { name, phone, sex } = this.formData;
    //   if (name && phone && sex) {
    //     return this.list;
    //   }
    // },
  },
  created() {
    this.search({});
  },
  methods: {
    search({ name, phone, sex }) {
      this.realList = this.list.filter(item => {
        let matchName = true; // 姓名 筛选
        let matchSex = true; // 性别 筛选
        let matchPhone = true; // 号码 筛选

        if (sex) {
          matchSex = item.sex == sex;
        }

        if (phone) {
          // console.info(Object.prototype.toString.call(phone));
          matchPhone = item.phone == phone;
        }

        if (name) {
          // 模糊搜索;
          const keys = name
            .toUpperCase() // 转大写
            .replace(' ', '') // 删掉空格
            .split(''); // 切割成 单个字

          matchName = keys.every(key => item.name.toUpperCase().includes(key));
        }
        return matchName && matchPhone && matchSex;
      });
    },
  },
};

已在本地用上面的类似方法测试过,没有问题!

  • 2
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
在 Spring Boot 中,可以通过 Spring Data JPA 框架来实现多条件模糊查询。如果你的前端使用的是 Vue.js,可以通过 Axios 来发送 HTTP 请求,并将查询条件作为参数传递给后端。 以下是一个简单的示例: 1. 定义一个 Java 类作为查询条件的封装: ```java public class UserQuery { private String name; private String email; // getters 和 setters 省略 } ``` 2. 在 Spring Boot 中定义一个 UserRepository 接口,并继承 JpaRepository 接口: ```java public interface UserRepository extends JpaRepository<User, Long> { List<User> findByNameContainingAndEmailContaining(String name, String email); } ``` 3. 在 Controller 中接收前端发送的查询条件,并调用 UserRepository 中定义的方法进行查询: ```java @RestController @RequestMapping("/users") public class UserController { @Autowired private UserRepository userRepository; @GetMapping("") public List<User> getUsers(@RequestParam("name") String name, @RequestParam("email") String email) { List<User> users = userRepository.findByNameContainingAndEmailContaining(name, email); return users; } } ``` 4. 在 Vue.js 中使用 Axios 发送 HTTP 请求: ```javascript axios.get('/users', { params: { name: 'John', email: 'john@example.com' } }) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); }); ``` 在以上示例中,我们通过 UserRepository 中的 findByNameContainingAndEmailContaining 方法实现了多条件模糊查询。在 Controller 中,我们使用 @RequestParam 注解接收前端发送的查询条件。在 Vue.js 中,我们使用 Axios 发送 HTTP 请求,并将查询条件作为参数传递给后端。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xingchen678

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值