vxe-table 表格过滤某一列的关键字查询，不需要调后端接口

先上效果图：

 方法：

在 vxe-table-column 标签里面用一个卡槽写一个input 标签

            <template v-slot:header="{ row }">
              <div>日期</div>
              <input v-model="dateTime" type="type" placeholder="" @keyup="searchEvent" />
            </template>

然后table表格用2个数组存储。
如果  input 框输入有值就走 过滤的方法，否则直接取接口返回的数据。

      if (this.dateTime) {
        this.tableData = this.originData.filter(item => !this.dateTime || item.date.toLowerCase().includes(this.dateTime.toLowerCase()))
      } else {
        this.tableData = this.originData
      }

最后贴上所有代码：

<template>
  <div>
      可视化
       <vxe-table
          ref="xTree"
          max-height="600"
          :loading="loading"
          :data="tableData">
          <vxe-table-column field="name" title="名称">
            <!-- <template v-slot:header="{ row }">
              <div>名称</div>
              <input v-model="filterName" type="type" placeholder="" @keyup="searchEvent">
            </template> -->
          </vxe-table-column>
          <vxe-table-column field="size" title="大小" width="140"></vxe-table-column>
          <vxe-table-column field="type" title="类型" width="140"></vxe-table-column>
          <vxe-table-column field="date" title="日期" width="260">
            <template v-slot:header="{ row }">
              <div>日期</div>
              <input v-model="dateTime" type="type" placeholder="" @keyup="searchEvent" />
            </template>
          </vxe-table-column>
        </vxe-table>

  </div>
</template>

<script>
export default {
  data(){
    return{
      filterName: '',
      dateTime: '',
      loading: false,
      originData: [],
      tableData: [
        {name:"vxe-table 从入门到放弃 10000", size:'53k', type:'', date:'2021-12-02 12:09:51'},
        {name:"vxe-table 入坑系列 20000.png", size:'66k', type:'png', date:'2020-11-02 10:29:51'},
        {name:"文件夹 30000", size:'5k', type:'', date:'2019-10-02 11:30:51'},
      ]
    }
  },
  created () {
    this.loading = true
    setTimeout(() => {
      this.loading = false
      this.originData = this.tableData
      this.handleSearch()
    }, 300)
  },
  methods: {
    handleSearch () {
      if (this.dateTime) {
        this.tableData = this.originData.filter(item => !this.dateTime || item.date.toLowerCase().includes(this.dateTime.toLowerCase()))
      } else {
        this.tableData = this.originData
      }
    },
    // 创建一个防反跳策略函数
    searchEvent() {
      this.handleSearch()
    },
  }      
}
</script>

<style>

</style>