vue プロジェクトは要素 ui pager を使用します

1: 要素 ui をダウンロードしてプロジェクトに 導入します ---要素 ui

(1) : ダウンロード

npm i element-ui -S

(2): vue プロジェクト man.js にマウントされた要素 ui とそのスタイルを導入します。

import ElementUI from 'element-ui'   //element ui
import 'element-ui/lib/theme-chalk/index.css'  //css样式
Vue.use(ElementUI, {size:"small"   //size是指按钮});  //挂载

2: 使用するコンポーネントで直接使用する

//此块代码是放在template中的---也就是我们要放置显示分页的区域    
  <!-- *分页器* -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[8, 16, 24, 32, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- *分页器 end * -->

//以下几个key值是放在data中的 

   //页面如果涉及到表单搜索查询   当前页数与每页条数放置在表单取值中  
   current: 1,   //当前页数
      size: 8,  //每页显示条数
      
     // 分页配置  跳转到多少页的
      currentPage: 1, //直接跳转到的页数
      total: 100,  //总条数
     

    //以下是放在methods中，是用来点击切换页码与条数的
    //分页
    handleSizeChange(val) {
      this.formInline.size = val;   //formInline 是我页面表单的数据对象
      this.Data(); //此处调用页面涉及到搜索  应调用放置搜索事件  无搜索直接调用页面数据接口即可     
    },
    handleCurrentChange(val) {
      this.formInline.current = val;
      this.Data();//此处调用页面涉及到搜索  应调用放置搜索事件  无搜索直接调用页面数据接口即可
    },

効果：

公式サイト---ページアドレス      に応じて種類を切り替えることができます 

 

初心者向けに、コンポーネントでページネーションを使用する方法に関する簡単なチュートリアル~~~