Question

我正在尝试使用Vue表2过滤器按日期过滤数据，不幸的是它没有出现问题，我无法找到原因。有没有人用Vue表2尝试过这么多个过滤器？

我浏览了文档，但找不到解决方案。

https://matanya.gitbook.io/vue-tables-2/custom-filters

HTML代码按日期过滤数据

<div class="col-md-4">
  <div class="form-group">
    <label for="sel1">Start Date:</label>
      <input type="text" class="form-control" @keyup="applyFilterSearchText(searchText)" v-model="searchText" placeholder="End date" />
  </div>
</div>



import { Event } from "vue-tables-2";
import axios from "axios";

export default {
  title: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      letters: ["Filled", "Unfilled", "Expired"],
      selectedLetter: "",
      searchText: "", 
      columns: ["refNumber", "vacancyTitle", "sector", "startDate", "endDate", "vacancyStatus"],
      //data: getdetails(),
      options: {
        headings: {
          refNumber: "Ref",
          vacancyTitle: "Title",
          sector: "Sector",
          startDate: "Start",
          endDate: "End",
          vacancyStatus: "Status"
        },
        customFilters: [
          {
            name: "alphabet",
            callback: function(row, query) {
              return row.vacancyStatus == query;
            }
          },
           {
            name: "datefilter",
            callback: function(row, query) {
              return row.startDate == query;
            }
          }
        ],
        // filterAlgorithm: {
        //   textsearch(row, query) {
        //     return (row.title).includes(query);
        //   }
        // },
        sortable: ["startDate", "vacancyTitle","endDate"],
        sortIcon: {
          base: "fa",
          is: "fa-sort",
          up: "fa-sort-asc",  
          down: "fa-sort-desc"
        },
        texts: {
          filter: "Search by text:"
        }
      },
      tableData:[],

    };
  },
  methods: {
    applyFilter(event) {
      this.selectedLetter = event.target.value;
      Event.$emit("vue-tables.filter::alphabet", this.selectedLetter);
    },
    applyFilterSearchText() {
      console.log(this.searchText,"heiiiiiiiiiiii");
      Event.$emit("vue-tables.filter::datefilter", this.searchText);     
    },
    getdetails(){
        axios.get("https://localhost:44399/api/Vacancy")
        .then((res) => {
          console.log(res.data,"ressssssss");
          this.tableData =  res.data;         
        })
        .catch(function(error) {
          console.log("Error: ", error);
        });
    }
  },
  mounted() {
    this.getdetails();
  }
};

Answer 1

一个可能的解决方案是在数据表中使用数据之前对数据进行排序。首先，创建一个包含所有潜在过滤器的数据计算文件，然后创建带有“参数”（排序方向，排序列...）的数据变量

export default {
    title: "HelloWorld",
    props: {
        msg: String
    },
    data () {
        return {
            yourData: [],
            sortBy: 'name',
            sortDir: 'asc',
            filterSearch: ''
        }
    },
    computed: {
        filteredData () {
            if (filterSearch != '') {
                let _this = this;
                return this.sortedData.filter(item => {
                    return item.name.toLowerCase().includes(_this.filterSearch.toLowerCase());
                })
            } else {
                return this.sortedData;
            }
        },
        sortedData() {
            return this.yourData.sort((a, b) => {
                let modifier = 1;
                if (this.sortBy == "order") {
                    if (this.sortDir === 'asc') {
                        return a[this.sortBy] - b[this.sortBy]
                    } else if (this.sortDir === 'desc') {
                        return b[this.sortBy] - a[this.sortBy]
                    }
                } else {
                    if (this.sortDir === 'desc') modifier = -1;
                    if (a[this.sortBy] < b[this.sortBy]) return -1 * modifier;
                    if (a[this.sortBy] > b[this.sortBy]) return modifier;
                    return 0;
                }
            });
        }
    }
}

您只需替换用于将数据传递到VueTables的props值

Vuejs2：Vue表2-多个自定义过滤器

1 个答案: