Vue+elementui 过滤条件

<template>
  <el-container>
    <el-main>
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="名称：" prop="ProjectName">
          <el-input
            v-model="queryParams.ProjectName"
            placeholder="请输入名称"
            clearable
            @clear="clearInput()"
          />
        </el-form-item>
        <el-form-item label="城市：" prop="City">
          <el-input
            v-model="queryParams.City"
            placeholder="请输入城市"
            clearable
            @clear="clearInput()"
          />
        </el-form-item>
        <el-form-item label="时间：" prop="OpeningTime">
          <el-date-picker
            v-model="valueTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="empty_querypro"
            @clear="clearInput()"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="queryitem()">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableList" border stripe highlight-current-row>
        <el-table-column prop="ProjectName" label="名称">
          <template slot-scope="scope">
            <span>{{ scope.row.ProjectName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="City" label="城市">
          <template slot-scope="scope">
            <span>{{ scope.row.City }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="OpeningTime" label="时间">
          <template slot-scope="scope">
            <span>{{ scope.row.OpeningTime }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<script>
import { Queryproject } from '@/api/project'
export default {
  data() {
    return {
      queryParams: {
        current: 1,
        limit: 20,
        total: 0,
      },
      tableList: [],
      valueTime: ''
    }
  },
  created() {
    this.queryitem()
  },
  methods: {
    clearInput() {
      this.queryitem()
    },
    empty_querypro(val) {
      console.log('选择的时间', val)
      if (val != null && val !== undefined && val.length !== 0) {
        this.queryParams.BeginTime = val[0].replace(/-/gi, '')
        this.queryParams.EndTime = val[1].replace(/-/gi, '')
        console.log('开始时间', this.queryParams.BeginTime)
        console.log('结束时间', this.queryParams.EndTime)
      } else {
        this.queryParams.BeginTime = null
        this.queryParams.EndTime = null
      }
      // this.queryitem()
    },
    queryitem() {
      Queryproject(this.queryParams).then(response => {
        if (response.data.success) {
          this.queryParams.total = Number(JSON.parse(response.data.data).TotalSize)
          if (JSON.parse(response.data.data).RowCnt) {
            this.tableList = JSON.parse(response.data.data).Records
            console.log(this.tableList)
          }
        }
      })
    }
  }
}
</script>
<style scoped>
</style>

1.可通过名称城市或者时间通过点击‘搜索’按钮实现对于表格信息的过滤

2.替换表接口和相应字段即可