vue+Elementui+分页

分页开发

模块化开发

组件（component）是vue.js最强大的功能之一。组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。 我们实例化的Vue对象就是一个组件，而且是所有组件的根组件

全局组件

组件注册 — Vue.js

注意:template:后面的内容应该使用``引起来 而且是核心的代码

1. 定义组件的内容：
<template>

   <div>
       <div>我就是一个测试:{{name}}</div>
       <button @click='handle'>按钮</button>
   </div>

</template>

<script>
     export default {
          data(){
                 return {
                     name:"test",
                     num:1
                 }
                },
          methods:{
                    handle(){
                        alert("这是第"+this.num+"次点击按钮");
                        this.num++;
                    }
                }
         }
</script>
<style>
</style>
2. 将组件设置成一个全局的组件
在main.js中编写如下代码
import test from '@/views/test.vue';
// 注册为全局组件
Vue.component('my-test', test);

3. 使用组件
在需要使用这个内容的地方引入这个组件即可

<my-test></mty-test>

局部组件

1. 声明组件的内容 同a
2. 将组件注册到自己想要使用的页面中

import test from '@/views/test.vue'
export default {
          ..............
          components:{
              "my-test":test
          }
        }

1. 开始使用局部组件

<my-test></my-test>

组件传值

父传子

• 父组件定义数据并通过属性的方式给子组件传递数据
• 子组件通过props属性接受数据并做参数设置
• 子组件使用传递过来的数据

1. 父组件使用子组件 
将数据（testcontent）绑定到test中传递给子组件
<my-test :test="testcontent"></my-test>

js中的代码:
 export default {
          data(){
              return{
                  
                  testcontent:"就是测试一下父传子"
              }
          }
}

2. 子组件接收数据
export default {  
.......   
   props:['test'],
 ........      
}
3. 子组件使用父组件中的数据
 <div>获取主组件中的值:{{test}}</div>

子传父

子组件通过$emit触发父组件上的自定义事件，发送参数

• 子组件绑定事件

<button @click="handlechild">传值</button>

 handlechild(){
                        // 第一个是绑定事件的名字   第二个是你要传递给父组件的值
                        this.$emit("getchildval",this.name)
                    }

调用this.$emit方法传递数据，第一个参数是自己定义的事件名，第二个参数是传递的数据

• 父组件监听传递的事件getchildval
• 父组件中对监听的事件做处理，拿到传递的数值再在页面显示或其他处理。

  <my-son @getchildval="fugetson"></my-son>
...
                data(){
                    return{
                        sonval:""
                    }
                },
                methods:{
                    fugetson(val){
                        this.sonval=val;
                    }
                }
...

1. 父组件调用子组件
        <div id="app">
            <my-son @getchildval="fugetson"></my-son>
            <span>子组件中的值是:{{sonval}}</span>
            
        </div>
        
 
 2. 取子组件中的值:      
        <script type="text/javascript">
             export default {
                data(){
                    return{
                        sonval:""
                    }
                },
                methods:{
                    fugetson(val){
                        this.sonval=val;
                    }
                }
            }
        </script>
        
    </body>
</html>

使用分页的模块化开发

<template>
    
    <div class="block">
       <!-- <span class="demonstration">完整功能</span> -->
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="page.currPage"
         :page-sizes="[2, 4, 6, 8]"
         :page-size="page.pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="page.total">
       </el-pagination>
     </div>
</template>

<script>
    export default {
        props:["page"],
        methods:{
             handleSizeChange(val) {
                 this.$emit("pagination",{pageSize:val,currPage:this.page.currPage})
              },
             handleCurrentChange(val) {
                // 数据  发生更改   
                // 当前页 
                // this.page.currPage = val;
                // this.initTable();
                this.$emit("pagination",{pageSize:this.page.pageSize,currPage:val})
            }    
         }
         
    }
</script>

<style>
</style>

注册全局的分页组件

import fy from '@/views/fenye.vue';
// 注册为全局组件
Vue.component('fen-ye', fy);

在需要的地方使用分页组件

 <!--  引入分页的组件-->
          <fen-ye :page="page" @pagination="getData"></fen-ye>

子组件中的值传给父组件的时候 需要绑定一个事件 如果不绑定事件没法传值

export default {
    methods: {
        getData(obj){
            this.page.currPage=obj['currPage'];
            this.page.pageSize=obj['pageSize'];
            this.initTable();
        },
      ..........
      initTable(){
          // 发出axios请求  把后端响应的结果 给tableData
          // 查询的时候追加一个条件
          // 操作
          // 当前页    每页显示的条数  直接取值  data() 
          //          //  this.$axios({
         //    method: 'get',
         //    url: `/tBook?currPage=${this.currentPage4}&pageSize=${this.pageSize}`,
            // params: this.searchinline
         //  })
         
         // this.searchinline {}      & 分页   this.page {}
         // 合并   es ...  对象合并  {}  
        let newparam = {...this.searchinline,...this.page};  //
        //  合并对象的方式
        //alert(JSON.stringify(aaa));
         // params:{}
          this.$axios.get(`/tBook`,
          {params:newparam})
          .then((response)=> {
                // 访问成功的回调 response 代表的是后端响应的数据结果
                //let result =response.data;// code   msg  t  ->Result

                // 集合中的数据  
                let dataList = response.t.list;
                // 数据的总条数
                this.page.total = response.t.total;
                  //console.log(dataList);
                  // dataList 赋值给tableData
                this.tableData=dataList;
                  // code   403 
                  // axios的拦截器  
            })
            .catch(function (error) {
                // error 访问失败
              console.log(error);
            });
      },
    },
    data() {
      return {
        tableData: [],
        dialogVisible:false,
         labelPosition: 'right',
         formLabelAlign:{
             inters:[]
         },
         // 查询条件
          searchinline: {},// 分页的时候使用的数据   当前页
          page:{
             currPage: 1,// 当前页
             pageSize:4,// 每页显示多少条数据
             total:10 ,// 总的数据的条数
         }
      }
    },
    // created()  vue声明周期中的钩子函数
    created(){
         this.initTable();
    },
    mounted(){}
  }
  // 普通函数  和 箭头函数   this的指向问题

添加

删除

修改