#yyds干货盘点#28.实战练习

三叶草

一、vue工程化开发
准备nodejs环境
使用JS依赖包管理工具：npm 和 yarn
创建工程化Vue应用程序：vue-cli
创建和使用单文件组件     
使用vue-devtools调试vue应用程序

二、实战练习

• 创建单文件组件
  

• Mtable组件：接收props数据（headers，lists），显示分页结果
• 分页信息使用分页组件Mpage（接收props数据：记录总数count）
• 显示bootstrap表格和分页效果
  

三、实战练习（Vue代码）
1.App.vue

<template>
  <div id="app">
  <h5>使用表格组件</h5>
  <Mtable :headers="headers" :lists="lists"></Mtable>
  </div>
</template>

<script>
import Mtable from "./components/Mtable.vue";
export default {
  name: 'app',
  data :function() {
  return {
    headers: ['姓名', '年龄'],
    lists: [
    { name: '张三', age: 18},
    { name: '张三', age: 18},
    { name: '李四', age: 20},
    { name: '李四', age: 20},
    { name: '王五', age: 16},
    { name: '王五', age: 16}  
    ]  
  };
  },
  components: {
  Mtable
  }
}
</script>
<style>
</style>

2.Mpage.vue

<template>
  <nav aria-label="Page navigation">
    <ul class="pagination">
    <li :class="page == 1 ? 'page-item disabled' : 'page-item'" @click.prevent="prevousPage(p)">
      <a class="page-link" href="#" aria-label="Previous">
      <span aria-hidden="true">«</span>
      <span class="sr-only" >Previous</span>
      </a>
    </li>
    <li :class="page == p ? 'page-item active' : 'page-item'" v-for="p in pagecount" :key="p">
      <a class="page-link" href="#" @click.prevent="jumpToPage(p)">{{p}}</a></li>
    <li :class="page == pagecount ? 'page-item disabled' : 'page-item'" @click.prevent="nextPage(p)">
      <a class="page-link" href="#" aria-label="Next">
      <span aria-hidden="true">»</span>
      <span class="sr-only" >Next</span>
      </a>
    </li>
    </ul>
  </nav>
</template>
<script>
export default {
  name: 'Mapge',
  props: ['count','pagesize'],
  data () {
    return {
    page: 1
    };
  },
  computed: {
    //计算分页码
    pagecount: function(){
    return Math.ceil(this.count / this.pagesize);
    }
  },
  methods: {
    prevousPage: function(p){
    if(this.page > 1 ){
      p = this.page = this.page - 1;
      
      this.$emit('mpage-prevouspage',p);
      
    }
    },
    jumpToPage: function(p){
    this.page = p;
    //向父元素更新数据
    this.$emit('mpage-jumptopage',p);
    },
    nextPage: function(p){
    if(this.page != this.pagecount){
     this.page = this.page + 1;
     p=this.page;
    this.$emit('mpage-nextpage',p);
    } 
  },
  }
}
</script>

3.Mtable

<template>
  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th v-for="(item, index) in headers" :key="index">{{item}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in pagelists" :key="index">
          <td v-for="(td, i) in item" :key="i">{{td}}</td>
        </tr>
      </tbody>
    </table>
    <!-- 使用分页组件 -->
    <Mpage :count="lists.length" :pagesize="pagesize" @mpage-jumptopage="updatepage" @mpage-prevouspage="prevouspage" @mpage-nextpage="nextpage"></Mpage>
  </div>
</template>

<script>
import Mpage from './Mpage.vue';

export default {
  name: 'Mtable',
  props: ['headers', 'lists'],
  data: function() {
    return {
      pagesize: 2,
      page: 1
    };
  },
  computed: {
    pagelists: function(){
      //返回当前的分页记录
      var offset = (this.page - 1) * this.pagesize;
      return this.lists.slice(offset, offset + this.pagesize);
    }  
  },
  components: {
    Mpage
  },
  methods: {
    prevouspage: function(p){
       this.page = p;
    },
    updatepage: function(p){
      this.page = p;
    },
    nextpage: function(p){
      this.page = p;
    }
  }
}
</script>