element-ui 表格时间范围查询-分页

最新推荐文章于 2024-08-01 10:14:28 发布
最新推荐文章于 2024-08-01 10:14:28 发布
阅读量1.8k 收藏 24
点赞数 2
分类专栏： vue 文章标签： ui javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Joise_/article/details/122577646
版权

element-ui 表格时间范围查询-分页

1 效果

  • 前端vue+在这里插入代码片Javascript

  • element-ui的日期时间选择器选择时间范围

  • filter( )函数将时间范围内的数据过滤

  • 表格分页设置
    在这里插入图片描述

2 实现方法

  • 日期时间选择器
  • 响应式布局
    <el-row>
      <el-col :xs="4" :sm="6" :md="8" :lg="12" :xl="8">
        <div>
          <span style="margin: 0px 5px 0px 0px">查询时间范围</span>
          <el-date-picker v-model="search_data.startTime" type="datetime">
          </el-date-picker>
          --
          <el-date-picker v-model="search_data.endTime" type="datetime">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="2" :xl="1">
        <div>
          <el-button type="primary" icon="search" @click="imtScreen()"
            >查询</el-button
          >
        </div>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="1" :xl="1">
        <el-button type="primary" @click="reset()">返回</el-button>
      </el-col>
    </el-row>
  • 获取表格数据
 getEsbData() {
      console.log("requesting......");
      this.$axios
        .get("/esbList")
        .then((res) => {
          for (var i = 0; i < res.data.length; i++) {
            var esb = Object();
            esb["id"] = res.data[i]["id"];
            esb["requestAddress"] = res.data[i]["requestAddress"];
            esb["cvtJson"] = res.data[i]["cvtJson"];
            esb["retJson"] = res.data[i]["retJson"];
            esb["getJson"] = res.data[i]["getJson"];
            var endDt = new Date(res.data[i]["endDt"]);
            var startDt = new Date(res.data[i]["startDt"]);
            var cvtDt = new Date(res.data[i]["cvtDt"]);
            esb["startDt"] = res.data[i]["startDt"];
            // 总耗时
            esb["allDt"] = endDt - startDt;
            // 乙方耗时
            esb["yiDt"] = cvtDt - startDt;
            // 对方耗时
            esb["duiDt"] = endDt - cvtDt;

            this.esbData.push(esb);
            this.filterTableData.push(esb);
            // esb["retJson"]
            console.log(res.data[i]);
          }
          // 设置分页数据
      		this.setPaginations();
          this.loading=false
        })
        .catch((err) => {
          console.log(err);
        });
    },
  • 分页设置
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.paginations.page_index"
            :page-sizes="this.paginations.page_sizes" :page-size="this.paginations.page_size" layout="total, sizes, prev, pager, next, jumper"
            :total="esbData.length">
        </el-pagination>

  data() {
    return {
      centerDialogVisible: false,
      name: "",
      esbData: [],
      BaoWen: "",
      filterTableData: [], //经过时间筛选后得到的数据
      search_data: {
        startTime: '',
        endTime: '',
      },
      loading: true,
      tableData:[],
      //需要给分页组件传的信息
      paginations: {
        page_index: 1, // 当前位于哪页
        total: 0, // 总数
        page_size: 5, // 1页显示多少条
        page_sizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
    }
    };
  },
method(){
  handleSizeChange(page_size) {
        // 切换size
        this.paginations.page_index = 1;
        this.paginations.page_size = page_size;
        this.tableData = this.esbData.filter((item, index) => {
        return index < page_size;
      });
    },
    handleCurrentChange(page) {
      // 当前页
      let sortnum = this.paginations.page_size * (page - 1);
      let table = this.esbData.filter((item, index) => {
        return index >= sortnum;
      });
      // 设置默认分页数据
      this.tableData = table.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
    setPaginations() {
      // 总页数
      this.paginations.total = this.esbData.length;
      this.paginations.page_index = 1;
      this.paginations.page_size = 5;
      // 设置默认分页数据
      this.tableData = this.esbData.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
}
  • 实现筛选功能
 imtScreen() {
      //判断是否输入时间区间
      if (!this.search_data.startTime || !this.search_data.endTime) {
        this.$message({
          type: "warning",
          message: "请选择时间区间！",
        });
      }
      const stime = this.search_data.startTime.getTime();
      console.log(stime)
      const etime = this.search_data.endTime.getTime();
      //将筛选后的数据赋值给 allTableDate
      this.esbData = this.filterTableData.filter((item) => {
        //筛选后得到的数据 item 中包含数据日期 date
        //创建一个数组 date，存储得到的item.date
        let date = new Date(item.startDt);
        let time = date.getTime();
        return time >= stime && time <= etime;
      });
      //重新分页
      this.setPaginations();
    },
    reset() {
      this.esbData = this.filterTableData;
    },

3 完整代码

<template>
  <div>
    <h1>ESB日志管理和数据流传统计</h1>
    <el-row>
      <el-col :xs="4" :sm="6" :md="8" :lg="12" :xl="8">
        <div>
          <span style="margin: 0px 5px 0px 0px">查询时间范围</span>
          <el-date-picker v-model="search_data.startTime" type="datetime">
          </el-date-picker>
          --
          <el-date-picker v-model="search_data.endTime" type="datetime">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="2" :xl="1">
        <div>
          <el-button type="primary" icon="search" @click="imtScreen()"
            >查询</el-button
          >
        </div>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="1" :xl="1">
        <el-button type="primary" @click="reset()">返回</el-button>
      </el-col>
    </el-row>

    <el-card shadow="always" style="margin: 20px 20px 20px 20px">
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column prop="requestAddress" label="请求地址">
        </el-table-column>
        <el-table-column
          prop="startDt"
          label="开始时间"
          :formatter="dateFormat"
        >
        </el-table-column>
        <el-table-column prop="allDt" label="总耗时ms"></el-table-column>
        <el-table-column prop="yiDt" label="己方耗时ms"> </el-table-column>
        <el-table-column prop="duiDt" label="对方耗时ms"> </el-table-column>
        <el-table-column label="初始报文" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleClick('初始报文', scope.$index, scope.row)"
              >初始报文</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="转换报文" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleClick('转换报文', scope.$index, scope.row)"
              >转换报文</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="回执报文" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleClick('回执报文', scope.$index, scope.row)"
              >回执报文</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.paginations.page_index"
            :page-sizes="this.paginations.page_sizes" :page-size="this.paginations.page_size" layout="total, sizes, prev, pager, next, jumper"
            :total="esbData.length">
        </el-pagination>
      </div>
    </el-card>
    <!-- props 父组件传参子组件 -->
    <mydialog
      :centerDialogVisible="this.centerDialogVisible"
      :name="this.name"
      :BaoWen="this.BaoWen"
      @setDialog="getDialog"
    ></mydialog>
  </div>
</template>

<script>
// import mypagination from "./pagination.vue";
import dateselect from "./DateSelect.vue";
import datetimerange from "./Datetimerange.vue";
import mydialog from "./dialog.vue";
import ManagePage from "./ManagePage.vue";

export default {
  components: {
    dateselect,
    datetimerange,
    mydialog,
    // mypagination,
  },
  data() {
    return {
      centerDialogVisible: false,
      name: "",
      esbData: [],
      BaoWen: "",
      filterTableData: [], //经过时间筛选后得到的数据
      search_data: {
        startTime: '',
        endTime: '',
      },
      loading: true,
      tableData:[],
      //需要给分页组件传的信息
      paginations: {
        page_index: 1, // 当前位于哪页
        total: 0, // 总数
        page_size: 5, // 1页显示多少条
        page_sizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
    }
    };
  },
  methods: {
    getEsbData() {
      console.log("requesting......");
      this.$axios
        .get("/esbList")
        .then((res) => {
          for (var i = 0; i < res.data.length; i++) {
            var esb = Object();
            esb["id"] = res.data[i]["id"];
            esb["requestAddress"] = res.data[i]["requestAddress"];
            esb["cvtJson"] = res.data[i]["cvtJson"];
            esb["retJson"] = res.data[i]["retJson"];
            esb["getJson"] = res.data[i]["getJson"];
            var endDt = new Date(res.data[i]["endDt"]);
            var startDt = new Date(res.data[i]["startDt"]);
            var cvtDt = new Date(res.data[i]["cvtDt"]);
            esb["startDt"] = res.data[i]["startDt"];
            // 总耗时
            esb["allDt"] = endDt - startDt;
            // 乙方耗时
            esb["yiDt"] = cvtDt - startDt;
            // 对方耗时
            esb["duiDt"] = endDt - cvtDt;

            this.esbData.push(esb);
            this.filterTableData.push(esb);
            // esb["retJson"]
            console.log(res.data[i]);
          }
          // 设置分页数据
      		this.setPaginations();
          this.loading=false
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClick(baowen, inedx, row) {
      //赋值
      this.centerDialogVisible = true;
      this.name = baowen;
      this.BaoWen = row;
      // console.log(this.centerDialogVisible)
    },
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property];
      if (daterc != null) {
        var date = new Date(daterc);
        var year = date.getFullYear();
        /* 在日期格式中，月份是从0开始，11结束，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours =
          date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return (
          year +
          "/" +
          month +
          "/" +
          day +
          " " +
          hours +
          ":" +
          minutes +
          ":" +
          seconds
        );
      }
    },
    getDialog(dialog) {
      this.centerDialogVisible = dialog;
    },
    imtScreen() {
      //判断是否输入时间区间
      if (!this.search_data.startTime || !this.search_data.endTime) {
        this.$message({
          type: "warning",
          message: "请选择时间区间！",
        });
      }
      const stime = this.search_data.startTime.getTime();
      console.log(stime)
      const etime = this.search_data.endTime.getTime();
      //将筛选后的数据赋值给 allTableDate
      this.esbData = this.filterTableData.filter((item) => {
        //筛选后得到的数据 item 中包含数据日期 date
        //创建一个数组 date，存储得到的item.date
        let date = new Date(item.startDt);
        let time = date.getTime();
        return time >= stime && time <= etime;
      });
      //重新分页
      this.setPaginations();
    },
    reset() {
      this.esbData = this.filterTableData;
    },
    handleSizeChange(page_size) {
        // 切换size
        this.paginations.page_index = 1;
        this.paginations.page_size = page_size;
        this.tableData = this.esbData.filter((item, index) => {
        return index < page_size;
      });
    },
    handleCurrentChange(page) {
      // 当前页
      let sortnum = this.paginations.page_size * (page - 1);
      let table = this.esbData.filter((item, index) => {
        return index >= sortnum;
      });
      // 设置默认分页数据
      this.tableData = table.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
    setPaginations() {
      // 总页数
      this.paginations.total = this.esbData.length;
      this.paginations.page_index = 1;
      this.paginations.page_size = 5;
      // 设置默认分页数据
      this.tableData = this.esbData.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
  },
  mounted() {
    // console.log("fasdf")
    this.getEsbData();
  },
};
</script>
关于 element-ui 日期范围选择控件, 限制不能选择当天之后的日期 并且 限制只能选择30天
weixin_47124387的博客
10-19 2977
关于 element-ui 日期范围选择控件, 限制不能选择当天之后的日期 并且 限制只能选择30天 html 部分 <el-date-picker v-model="dateRange" type="daterange" unlink-panels format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日
Vue+element-ui 实现表格的分页功能示例
10-18
主要介绍了Vue+element-ui 实现表格的分页功能示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Element UI的数据表格数据检索方法
qq_48730507的博客
04-25 3534
Element UI的数据表格数据检索方法，单元格内容检索，表头样式检索。
Element-UI日期组件支持时间范围以及限制选择时间跨度
Kimser
11-10 3992
每次只能选7天，是指选择的是10号，则以10号为基准点前推6天则是4号后推6天则是16号，选择的范围则是4号到16号（还得考虑180天的限制和今天日期的限制）。左右边界的限制计算时要加上20天这个限制，也就是左边界要取20天的左边界和选择时间跨度7天的左边界中大的，右边界取今天日期和时间跨度7天的右边界中小的。可以这样做，当用户点击第一下时，我们可以获得最小日期，也就以当前选择的日期为基准点，前面加6天后面加6天，包括选择的基准点正好是7天。选择的是20日，前后加减6天范围就是7天了。
element分页搜索表格
say_book的博客
07-30 909
获取全部表格数据，存取到tableData中，然后filterData用于储存当前表格显示数据，就完成了搜索功能，再将filterData进行分页后，绑定到表格的data中，即可完成前端的分页可搜索表格了。一个input输入框，一个table表格，还有标页码部分pagination。很多时候用到一些表格，总有不同的需求，下边是一个常见的实用性表格。其他的代码注释中讲的应该还挺清楚了就不过多赘述了。该组件可直接复制使用。...
WEB前端14-Element UI(学生查询表案例/模糊查询/分页查询)
最新发布
XYX_888的博客
08-01 835
props数组中存放的是父组件自定义的属性，通过此属性，父组件可以向子组件传递数据值，子组件通过获取数据，进行属性绑定，以实现对组件样式的变化。首先，确保你的项目已经集成了 Vue.js 和 Element UI。如果没有，你可以参考官方文档进行安装和配置。在 Vue.js 中，props 允许父组件向子组件传递数据，使得组件更加灵活和通用。插槽允许父组件将内容插入到子组件的特定位置，增强了组件的复用性和灵活性。方法触发事件，向父组件传递数据，实现组件间的通信。目录之下，以便父组件的灵活调用。
vue+基于element-ui的表格封装组件
01-31
在本项目中，我们关注的是一个特定的组件——"vue+基于element-ui的表格封装组件"。这个组件的主要目标是通过封装Element-UI中的Table组件，实现更高效、更灵活的表格管理和样式调整。 首先，让我们了解一下Vue.js...
element-ui 2.15.14版本
10-09
Element UI 的组件包括按钮、表单、表格、对话框、通知、布局等，这些组件都是遵循 Material Design 设计原则的，提供了丰富的样式和交互效果。例如，按钮组件可以设置不同颜色、大小和形状，表格组件支持数据排序、...
element-ui_2.15.1.zip
03-09
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面组件，用于构建优雅的前端应用。版本号 "2.15.1" 表示这是 Element UI 的一个稳定版本，包含了在此版本之前的多次迭代和优化。这个离线...
element-ui 表格实现单元格可编辑的示例
08-27
Element UI 提供了一个强大的表格组件 `el-table`，它可以用来展示大量的数据，并提供了许多有用的功能，例如排序、筛选、分页等。`el-table` 组件可以通过设置 `border` 属性来添加边框，可以通过设置 `width` 属性...
基于elementui分装了简单的表格分页查询逻辑
08-12
基于element-ui分装了简单的表格分页查询逻辑
Vue+elementUI+spring boot实现时间范围模糊查询
编程学习中
09-03 1745
在日常开发中会有使用时间范围来进行查询，通过前端向后端请求来过滤数据，我们可以运用elementUI组件实现此功能。
element-ui中日期区间组件
H5女王范儿
05-16 1693
3、如果要完善第一条，点击确定按钮之前，只要不满足条件，点击任何区域都不会收起日期选择组件，除非关闭浏览器这一操作方法，日期组件上添加change方法（没有尝试过，用change方法和用blur方法的区别是，blur方法满足第二条，用change方法的话，点击确定按钮会校验一次，再次点击确定按钮会校验通过，对于我的需求有bug，所以用了blur方法，有兴趣的朋友可以尝试一下两个方法，本人比较懒不想尝试）2、点击确定按钮之后，只要不满足条件，点击任何区域都不会收起日期选择组件，除非关闭浏览器。
【ElementUI】日期选择器时间选择范围限制
qq_33225414的博客
01-15 921
【ElementUI】日期选择器时间选择范围限制。
Element 中查询前多少天、前多少周、前多少月的数据
越陌度阡
02-02 402
在开发后台管理系统时，经常会遇到这样一种需求，查询前多少天、多少周、多少月的数据，虽然 UI框架有自带的组件可以实现这些功能，但是操作起来却不是很方便，而且这些都是查询最近时间的数据，没有必要用日期组件，这种情况下就需要自己写了。功能的基本实现思路为：根据日、周、月分别定义三个下拉选项，选择不同的日期类型时，显示不同的日期下拉选项，默认为第一个下拉选项。
element表格查询(多条件)
九亿宅男的梦的博客
05-12 4498
https://blog.csdn.net/luzhaopan/article/details/81569907 <el-table ref="multipleTable" :data="tables" tooltip-effect="dark" style="width: 100%" max-height="70vh" @selection-change="handleSelectionChange" :row-style="rowClass" > r
elementUI 日期选择器限制时间范围
weixin_49072460的博客
10-20 3077
elementUI 日期选择器限制时间范围 产品需求，新建任务的时候，选择一个名称，然后返回该名称的有效日期，只能在有限日期内选择任务的时间 使用的是elementUI自带的picker-options这个属性，因为我这个是需要动态的获取业务名称的有效周期，所以在切换名称的时候，使用change事件调用后台的给的接口，获取到该名称的有效周期， <el-select v-model="businessName" remote placeholder="请选择名称" @change="getDisab
根据选择日期范围查询数据
weixin_51465537的博客
07-19 383
结合ElemnetUI中的DatePicker 日期选择器，实现根据选择的日期，查询对应的数据。当对应数据中含有2023-07-19的数据时，此时日期选择其中的startTime和endTime均为2023-07-19，查询对应数据为空。使用dayjs()初始化开始时间为对应时间的0时0分0秒0毫秒，同理结束时间改为对应天的23点59分59秒999毫秒。dayjs()是修改时间的较好工具，可以参考文档。
Vue.js+Element：根据指定表格项查询表格
qq_44419617的博客
09-25 2221
效果 代码 <template> <div class="app-container"> <div style="margin-top:20px"> <el-input v-model="tableDataName" placeholder="请输入姓名" style="width:240px"/> <e...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值