多条件搜索

在后台管理系统里面多条件搜索是一个必不可少的功能，但对很多人都非常头疼，下面跟着我的脚步我们一起制作。

<template>
  <div class="top_name" :style="divStyle">
    <!-- 骑手名 -->
    <div class="name"
      ><div class="name_input">
        <b>店铺名称：</b>
        <el-select placeholder="店铺名称" v-model="search.pid.value" class="input_names">
          <el-option
            v-for="(option, index) in list_inner"
            :key="index"
            :label="option.store_id"
            :value="option.id"
          />
        </el-select>
        <!-- <el-input
            class="input_name"
            placeholder="店铺名称"
            v-model="search.store_id.value"
          />  -->
      </div>
      <div class="name_input">
        <b>商品名称：</b>
        <el-input class="input_name" placeholder="商品名称" v-model="search.title.value" />
      </div>
      <div class="name_input"
        ><b>商品状态：</b>
        <el-select placeholder="商品状态" class="input_name" v-model="search.status.value">
          <el-option label="上架" value="1" />
          <el-option label="下架" value="2" /> </el-select></div
    ></div>
    <div class="name"
      ><div class="name_input"> </div><div class="name_input"></div
      ><div class="name_inputs"
        ><el-button type="primary" @click="searchEvent" style="width: 70px; margin-left: 8%"
          >查找</el-button
        >
        <el-button type="info" style="width: 70px" @click="clear_inner">清空</el-button></div
      ></div
    >
  </div>
</template>

js

<script setup>
import { ref, reactive } from 'vue';
import axios from 'axios';
import qs from 'qs';
import { handleSearch } from '../../search.js';    //封装的搜索文件
const list_inner = ref('');
axios({
  url: '/api/store/index', //url
  params: {},
})
  .then(function (res) {
    console.log(res.data); // 成功回调
    list_inner.value = res.data.data;
    console.log(list_inner.value, '商品列表');
  })
  .catch(function (err) {
    console.log(err); // 失败回调
  });

// 搜索条件
const search = reactive({
  store_name: {
    value: ``,
    than: 'number',
  },
  pid: {
    value: ``,
    than: 'number',
  },
  status: {
    value: ``,
    than: 'includes',
  },
  tel: {
    value: ``,
    than: 'number',
  },
  title: {
    value: ``,
    than: 'includes',
  },
});

function searchEvent() {
  //结果
  tableData.value = handleSearch(search, list_table.value);
  console.log(tableData.value);
}

// 数据列表
const tableData = ref([]);
const gid_data = ref([]);

const list_table = ref([]);
axios({
  url: '/api/commodity/index', //url
  params: {},
})
  .then(function (res) {
    console.log(res.data, '111'); // 成功回调
    for (let i = 0; i < res.data.data.length; i++) {
      gid_data.value.push(res.data.data[i]);
      list_table.value.push(res.data.data[i]);
    }
  })
  .catch(function (err) {
    console.log(err); // 失败回调
  });
</script>

css：
 

<style leng="scss">
.top_name {
  width: 100%;
  height: 8vh;
  transition: 1s;
  background-color: #ffffff;
}

/* 增加 */
.add {
  width: 100%;
  height: 6vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add_left {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
}

.add_right {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}

/* 骑手名 */
.name {
  width: 100%;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.name_input {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input_name {
  width: 70%;
}

.input_names {
  width: 70%;
}

.name_inputs {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
}

.name_inps {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.name_inps b {
  margin-right: 10px;
}

.but_success {
  width: 100%;
  height: 64px;
  display: flex;
  margin-top: 10px;
  align-items: center;
  justify-content: end;
}

.el-table__header {
  height: 60px;
}

.name_inpasd {
  width: 100%;
  display: flex;
  margin-top: 20px;
  justify-content: center;
}

.asdasd {
  width: 70%;
}

.name_inpss {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.name_inpss b {
  margin-right: 10px;
}
</style>

search.js文件：

export function handleSearch(searchObj, all) {
  let arr = [...all];
  for (const item in searchObj) {
    console.log(searchObj[item]);
    if (searchObj[item].than == 'includes') {
      arr = arr.filter((row) =>
        searchObj[item].value ? row[item].includes(searchObj[item].value) : true
      );
    } else {
      const v = searchObj[item].value;
      arr = arr.filter((row) =>
        v !== '' && v !== null && v !== undefined ? row[item] == searchObj[item].value : true
      );
    }
  }
  return arr;
}

export function handleSearch(searchObj, all) {
  let arr = [...all];
  for (const item in searchObj) {
    console.log(searchObj[item]);
    if (searchObj[item].than == 'includes') {
      arr = arr.filter((row) =>
        searchObj[item].value ? row[item].includes(searchObj[item].value) : true
      );
    } else {
      arr = arr.filter((row) =>
        searchObj[item].value ? row[item] == searchObj[item].value : true
      );
    }
  }
  return arr;
}

注意：我这里用的标签是组件，所以如果用的话需要引用组件