Vue + element 实现表单提交 分页实现 搜索实现

一、项目介绍

二、用到的技术

1、 vue+element
2、 vuex存储数据
3、 分页功能 搜索功能
4、 过滤器 生命周期理解

三、技术详解

1、vue+element

1.1 基础布局使用了

1.2 使用element自带表单

1.3 页面使用element自带的栅格布局 利用card来写框

2、vuex

2.1 vuex在其中起到存储表单提交的数据
正常vuex state中数据刷新一下就没了
所以在刷新前存储到本地 sessionStorage 中
app.vue中添加

created () {
      //在页面加载时读取sessionStorage里的状态信息
      if (sessionStorage.getItem("store") ) {
          this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
      } 

      //在页面刷新时将vuex里的信息保存到sessionStorage里
      window.addEventListener("beforeunload",()=>{
          sessionStorage.setItem("store",JSON.stringify(this.$store.state))
      })
    },

3、分页功能 搜索功能

3.1 分页功能

原理是 利用 display来显示 当前页

goPage(pno,psize){
            // pno 当前页
            //psize 每页行数
            var itable = document.getElementById("idData");
            console.log(itable.childNodes.length,'?11')
            var num = this.hospital.length
            this.pagenum = num
            
            var totalPage = 0;//总页数
            var pageSize = psize;//每页显示行数
            //总共分几页
            if(num/pageSize > parseInt(num/pageSize)){
                totalPage=parseInt(num/pageSize)+1;
                }else{
                totalPage=parseInt(num/pageSize);
            }
            var currentPage = pno;//当前页数
            var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
            var endRow = currentPage * pageSize;//结束显示的行  40
            endRow = (endRow > num)? num : endRow;  //40
            console.log(endRow);
            //遍历显示数据实现分页
            for(var i=1;i<(num+1);i++){
                var irow = itable.childNodes[i-1];
                if(i>=startRow && i<=endRow){
                irow.style.display = "block";
                }else{
                irow.style.display = "none";
                }
            }
            this.currentPage = currentPage
            this.totalPage = totalPage
        },

3.2 搜索功能

根据搜索的值 查找数组

search(value){
            let arr = []
            if(value == ''){
                this.hospital = this.$store.state.Hospital
            }else{
                let len = this.hospital.length
                for(let i =0 ;i<len;i++){
                    if(value == this.hospital[i].province){
                        console.log('index+1')
                        arr.push(this.hospital[i])
                    }else if(value == this.hospital[i].city){
                        console.log('index+1')
                        arr.push(this.hospital[i])
                    }else if(value == this.hospital[i].district){
                        arr.push(this.hospital[i])
                    }
                }
                this.hospital = arr
            }
        },

4、过滤器 生命周期

4.1 过滤器

<span class="materials">{{item.delivery | deliveryfil}}</span>

filters: {
        deliveryfil(value){
            if(value == true){
                return "库存紧急"
            }else{
                return "库存需要"
            }
        }
    },

4.2 关于生命周期
问题来自 分页

当我数据发生改变 页面有变化 但是 页码没有变化
本来数据获取写在mounted中的 无变化
换到 created 后 页码就能变化了
查询生命周期
created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

所以是当在mounted 时 数据已经定死了