vue 中实现搜索功能

最新推荐文章于 2024-04-05 22:29:42 发布

.星空.

最新推荐文章于 2024-04-05 22:29:42 发布

阅读量1k

点赞数 1

分类专栏： js vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_72759446/article/details/132388950

版权

js 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

要想实现搜索功能主要是通过filter和includes来实现的。

js部分代码：

//搜索对应绑定值
const search = reactive({
  status: "",
  dateTime: "",
  num: "",
  name: "",
  buy: ""
});

//搜索函数
const handleSearch = () => {
  let filtered = 关联数组;

  if (search.status) {
    //用于搜索下拉框的方法 精准搜索
    filtered = filtered.filter(data => data.status === search.status);
  }
  if (search.name) {
    //用于搜索输入框的方法  模糊搜索
    filtered = filtered.filter(data => data.userName.includes(search.name));
  }
  if (search.dateTime) {
    const searchTerm = search.dateTime.toLowerCase();
    filtered = filtered.filter(data => data.order_time.includes(searchTerm));
  }
  if (search.num) {
    filtered = filtered.filter(data => data.order_number == search.num);
  }
  if (search.buy) {
    filtered = filtered.filter(data => data.judge == search.buy);
  }
  filteredData.value = filtered;
};

html部分代码样式：

<!-- 搜索 -->
    <div class="search" v-if="searchCon">
      <div class="search_one">
        <el-select
          v-model="search.status"
          placeholder="请选择订单状态"
          :fit-input-width="true"
          @change="handleStatusChange"
          clearable
        >
          <template #prefix>
            <p>订单状态</p>
          </template>
          <el-option
            v-for="(option, index) in options"
            :key="index"
            :fit-input-width="true"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </div>

      <div class="search_one">
        <div class="block">
          <el-date-picker
            v-model="search.dateTime"
            type="month"
            :fit-input-width="true"
            placeholder="下单时间"
            @change="handleStatusChange"
            format="YYYY/MM"
            value-format="YYYY-MM"
            clearable
          />
        </div>
      </div>

      <div class="search_one">
        <el-input
          v-model="search.num"
          @input="handleStatusChange"
          placeholder="请选择订单编号"
        >
          <template #prepend>订单编号</template>
        </el-input>
      </div>

      <div class="search_one">
        <el-input
          v-model="search.name"
          @input="handleStatusChange"
          placeholder="请选择用户"
        >
          <template #prepend>用户姓名</template>
        </el-input>
      </div>

      <div class="search_">
        <el-select
          v-model="search.buy"
          placeholder="请选择购买方式"
          :fit-input-width="true"
          @change="handleStatusChange"
          clearable
        >
          <template #prefix>
            <p>购买方式</p>
          </template>
          <el-option
            v-for="(option, index) in buys"
            :key="index"
            :fit-input-width="true"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </div>
    </div>