按条件搜索

目录

1代码

2详细步骤

---

 

按照条件进行搜索，得到的结果展示在下面列表 

1代码

<template>
  <div>
    <el-card>
      <!-- 搜索表单 -->
      <el-form inline slot="header" size="mini" :model="serachForm">
        <el-form-item label="订单号">
          <el-input placeholder="订单号" clearable v-model="serachForm.orderNo"></el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input placeholder="收货人" clearable v-model="serachForm.consignee"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input placeholder="手机号" clearable v-model="serachForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select clearable v-model="serachForm.orderState" filterable>
            <el-option value="已受理" label="已受理"></el-option>
            <el-option value="派送中" label="派送中"></el-option>
            <el-option value="已完成" label="已完成"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="serachForm.date"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="success" @click="searchHandle"></el-button>
        </el-form-item>
      </el-form>
      //显示数据的表格
      <el-table :data="tableData"  height="400px">
        <el-table-column label="订单号" prop="orderNo" fixed></el-table-column>
        <el-table-column label="下单时间" prop="orderTime" width="150"></el-table-column>
        <el-table-column label="手机号" prop="phone" width="200"></el-table-column>
        <el-table-column label="收货人" prop="consignee" width="250"></el-table-column>
        <el-table-column label="配送地址" prop="deliverAddress" width="200"></el-table-column>
        <el-table-column label="送达时间" prop="deliveryTime" width="150"></el-table-column>
        <el-table-column label="用户备注" prop="remarks" width="150"></el-table-column>
        <el-table-column label="订单金额" prop="orderAmount"></el-table-column>
        <el-table-column label="订单状态" prop="orderState"></el-table-column>
        <el-table-column label="操作" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button icon="el-icon-view" size="mini" type="text"></el-button>
            <el-button icon="el-icon-edit" size="mini" type="text"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
//自己的接口
import { orderList } from "@/api/order";
export default {
  data() {
    return {
      //点击搜索按钮后获取的表单数据
      searchParams: {},
      //搜索表单的数据
      serachForm: {
        orderNo: "",
        date: [],
        phone: "",
        consignee: "",
        orderState: ""
      },
      //表格数据
      tableData: [],
      //接口的页码数据
      currentPage: 1,
      pageSize: 5,
      total: 0,
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    //获取数据
    async loadData() {
      let res = await orderList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchParams
      });
      let { total, data } = res.data;
      this.total = total;
      this.tableData = data;
      // console.log(res.data);
    },
    //搜索
    searchHandle() {
      //下单时间格式不符合后端的要求
      let data = JSON.parse(JSON.stringify(this.serachForm)); //深拷贝
      data.date = data.date == null ? [] : data.date; //表单清空之后变成了null
      data.date = JSON.stringify(data.date);
      this.searchParams = data;
      this.loadData();
    }
  }
};
</script>

2详细步骤

<1>进入页面时，通过接口，获取整个表格数据，并渲染出来

       loadData(){ this.tableData = data}

<2>绑定点击事件，配上搜索方法

      点击搜索按钮后，把获取到，与在搜索栏输入内容匹配的表单的数据，拷贝到一个新的对象（searchParams）里，把它传入获取数据接口的参数，这样从后台获取到的就是与搜索条件匹配的数据了。

      async loadData() {
      let res = await orderList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchParams
      });

注意：拷贝时要区分浅拷贝和深拷贝

深拷贝：数据是多层，且本数据带数组要考虑null的情况。所以先深拷贝，并在表单清空后变成                null时，将表单变成[]。

     searchHandle() {
      let data = JSON.parse(JSON.stringify(this.serachForm)); //深拷贝
      data.date = data.date == null ? [] : data.date; //表单清空之后变成了null
      this.searchParams = data;
      this.loadData();
      }

浅拷贝：直接浅拷贝一下

    searchHandle() {
      this.searchParams = { ...this.searchForm };
      this.loadData();
    },