vue3.0 + element Plus实现前端筛选表格数据（按照日期选择）

1. 引入element中的时间选择器

<!-- disabled-date用来判断该日期是否被禁用的函数 -->
<!-- format指定输入框的格式,使用 value-format 指定绑定值的格式。 -->
<el-date-picker
    v-model="createTime"
    type="daterange"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    :disabled-date="disabledDate"
    format="YYYY/MM/DD"
    value-format="YYYY-MM-DD"
/>

<!-- 这里是表格数据 二次封装过的 -->
<pagination-table
    :data="filterTableData"
    :current="false"
    :column="tableColumn"
    :hasPagination="false"
>
   <!--训练状态-->
   <template #trainStatus="scope">
       <train-status-tag :status="scope.row.lastTrainTask?.status" />
   </template>
</pagination-table>

2. 设置前端查询

时间选择器这个返回的是一个数组，也就是createTime为一个数组，这样我们就可以拿数组里面的两个值和表格中的值进行比较。

//条件筛选，我这里是有三个查询条件，你们可以根据需要自己设置
const search = ref("");
const model_type = ref("");
const createTime = ref("");

//对选择的日期进行限制，不可选当前日期之后的
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};

//这个filterTableData 就是表格的data数据
//dayjs是我引入的库文件
const filterTableData = computed(() =>
  algData.value.filter((data) =>
    (!createTime.value ||(createTime.value[0] <= dayjs(data.createDateTime).format("YYYY-MM-DD ") && dayjs(data.createDateTime).format("YYYY-MM-DD") <= createTime.value[1])) &&
    (!model_type.value || data.model_type === model_type.value) &&
    (!search.value || data.name.toLowerCase().includes(search.value.toLowerCase()))
  )
);

效果展示：