搜索分页和不搜索分页简便方法

最新推荐文章于 2022-04-26 10:15:48 发布

有趣的Soul。

最新推荐文章于 2022-04-26 10:15:48 发布

阅读量181

点赞数

分类专栏： vue element

本文链接：https://blog.csdn.net/weixin_45098257/article/details/117960122

版权

vue 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

element

26 篇文章 0 订阅

订阅专栏

下面是查询的语句和点击事件

<el-button size="mini" class="select" @click="SELECT()">查询</el-button>

 <el-pagination
                class="pagination"
                :page-size="PageNumber"
                :total="AllPageNumber"
                :current-page.sync="currentPage"
                @current-change="handleCurrentChange"
                layout="prev, pager, next, jumper">
        </el-pagination>

这个是data

 data() {
            return {
                //页数
                PageNumber: 10, //每页条数
                AllPageNumber: 100, //所有条数
                currentPage: 1, //当前页
                //自定义
                fenye: "未搜索",
                now_page:1,
            };
        },

  //一进入页面的所有数据  后面一定要是+this.now_page+
 GETDATE() {
                this.axios({
                    method: "get",
                    url: this.ip + "/api?page="+this.now_page+"&limit=10",
                    headers: {Authorization: this.token},//token
                })
                    .then((res) => {
                        this.tableData = res.data.data;
                        this.AllPageNumber=res.data.count  //一定要上写这个话
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            SELECT() {
                
  if(this.select===""&&this.input_cezhan===""&&this.input_start===""&&this.input_end===""){
                    this.GETDATE();
                } 
                else if (this.select===""||this.input_cezhan===""||this.input_start===""||this.input_end==="") {
                    this.$message("查询条件不完全");
                }
                else if (this.input_start >= this.input_end) {
                    this.$message("时间选择错误");
                }
                else{
                    this.axios({
                    methods: "get",
                    url: this.ip + "/api/Measuring_his/where",
                    headers: {Authorization: this.token},
                    params: {
                        region_code: this.select,
                        code: this.input_cezhan,
                        sdatetime: this.input_start,
                        edatetime: this.input_end,
                        page: this.now_page,   //注意这里一定也要写this.now_page
                        limit: 10,
                    },
                })
                    .then((res) => {
                        this.AllPageNumber=res.data.count  //这个也要写上
                        this.tableData = res.data.data;
                        this.fenye = "搜索"      //这里必须要赋值
                        this.time1=this.input_start
                        this.time2=this.input_end
                    })
                    .catch((err) => {
                        console.log(err);
                    });
                }
            },
            //分页点击事件
            handleCurrentChange(val) {  
                this.now_page=val
                console.log(this.now_page)
                //未搜索分页
                if (this.fenye === "未搜索" || this.fenye === "清空") {
                    this.GETDATE()
                }
                //搜索分页
                else if (this.fenye === "搜索") {
                    this.SELECT()
                }
            },
//清空
            CLEAR() {
                this.select = "";
                this.input_cezhan="";
                this.input_start = "";
                this.input_end = "";
                this.fenye = "清空";
                this.GETDATE();
            },