先在filters中定义好起止，然后在筛选方法中对列表数据进行筛选
点击筛选会走customDateFilterMethod方法，有多少条数据就会走多少次，又因为有起止俩个搜索条件，所以会走数据总数x2，例如，点击筛选，先走第一条数据的起始时间，将起始时间保存起来，然后走第一条数据的截止时间，然后进行对比筛选，return false 就是不显示第一条数据，return true 即显示第一条数据，以此类推
<div class>
<vxe-table ref="xTable" border height="400" :loading="loading" :data="tableData">
<vxe-column
field="date"
title="date"
:filters="[
{ data: '', label: '起:' },
{ data: '', label: '止:' }
]"
:filter-method="customDateFilterMethod"
>
<template #filter="{ $panel, column }">
<template v-for="(option, i) in column.filters">
<div :key="i" style="display: flex">
<span style="line-height: 42px; margin-right: 5px; margin-left: 10px">{{ option.label }}</span>
<vxe-input
v-model="option.data"
type="date"
placeholder="请选择"
transfer
clearable
@input="$panel.changeOption($event, !!option.data, option)"
/>
</div>
</template>
</template>
</vxe-column>
</vxe-table>
</div>
</template>
<script>
import dayjs from "dayjs";
export default {
name: "",
components: {},
props: {},
data() {
return {
loading: false,
tableData: [],
sexList: [
{ label: "女", value: "0" },
{ label: "男", value: "1" }
],
stateDate: ""
};
},
mounted() {
this.findList();
},
methods: {
findList() {
this.loading = true;
return new Promise(resolve => {
setTimeout(() => {
this.tableData = [
{ id: 10001, date: "2021-11-14" },
{ id: 10002, date: "2021-01-20" },
{ id: 10003, date: "2020-09-17" },
{ id: 10004, date: "2020-10-25" },
{ id: 10005, date: "2020-12-12" },
{ id: 10006, date: "2020-08-21" },
{ id: 10007, date: "2021-01-01" },
{ id: 10008, date: "2021-02-06" }
];
this.loading = false;
resolve();
}, 300);
});
},
customDateFilterMethod({ option, row }) {
if (option.data) {
if (option.label === "起:") {
this.stateDate = dayjs(option.data).valueOf();
}
if (option.label === "止:") {
let date = dayjs(row.date).valueOf();
if (date > this.stateDate && date < dayjs(option.data).valueOf()) {
return true;
} else {
return false;
}
}
}
}
}
};
</script>
<style lang='less' scoped>
</style>
