通过两个el-date-picker 开始时间 与结束时间来筛选table表格时间数据案例 vue2项目

好的，以下是一个简单的案例，你可以根据自己的需求进行修改：

1. 在组件中引入两个 el-date-picker 组件和一个 el-table 组件：

<template>
  <div>
    <el-date-picker
      v-model="startTime"
      type="datetime"
      placeholder="开始时间"
      @change="getTableData"
    ></el-date-picker>
    <el-date-picker
      v-model="endTime"
      type="datetime"
      placeholder="结束时间"
      @change="getTableData"
    ></el-date-picker>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="time" label="时间"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
    </el-table>
  </div>
</template>

2. 在 data 中定义 startTime、endTime、tableData 等变量：

<script>
export default {
  data() {
    return {
      startTime: "",
      endTime: "",
      tableData: [
        {
          time: "2021-06-01 10:00:00",
          content: "内容1",
        },
        {
          time: "2021-06-02 14:30:00",
          content: "内容2",
        },
        {
          time: "2021-06-03 09:45:00",
          content: "内容3",
        },
      ],
    };
  },
  methods: {
    getTableData() {
      // 根据开始时间和结束时间筛选数据
      const startTime = new Date(this.startTime).getTime();
      const endTime = new Date(this.endTime).getTime();
      this.tableData = this.tableData.filter(
        (item) =>
          new Date(item.time).getTime() >= startTime &&
          new Date(item.time).getTime() <= endTime
      );
    },
  },
};
</script>

3. 在 getTableData 方法中根据开始时间和结束时间筛选数据，并更新 tableData 变量。其中，new Date().getTime() 可以将日期字符串转换为时间戳，方便进行比较。

这样，你就可以通过两个 el-date-picker 组件来筛选 el-table 组件中的时间数据了。