分页

            <el-pagination
              background
              class="admin_pagination"
              prev-text="上一页"
              next-text="下一页"
              :current-page.sync="this.pageNum"
              :page-sizes="[10, 20, 50]"
              :page-size="this.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />

            <!--搜索 开始-->
            <div>
              <el-input
                v-model="keywords"
                placeholder="请输入内容"
                class="input-with-select"
                @keyup.enter.native="searchList(keywords)"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="searchList(keywords)"
                />
              </el-input>
            </div>
            <!--搜索 结束-->

 

element-ui的分页

small	是否使用小型分页样式	boolean	—	false
background	是否为分页按钮添加背景色	boolean	—	false
page-size	每页显示条目个数，支持 .sync 修饰符	number	—	10
total	总条目数	number	—	—
page-count	总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性	Number	—	—
pager-count	页码按钮的数量，当总页数超过该值时会折叠	number	大于等于 5 且小于等于 21 的奇数	7
current-page	当前页数，支持 .sync 修饰符	number	—	1
layout	组件布局，子组件名用逗号分隔	String	sizes, prev, pager, next, jumper, ->, total, slot	'prev, pager, next, jumper, ->, total'
page-sizes	每页显示个数选择器的选项设置	number[]	—	[10, 20, 30, 40, 50, 100]
popper-class	每页显示个数选择器的下拉框类名	string	—	—
prev-text	替代图标显示的上一页文字	string	—	—
next-text	替代图标显示的下一页文字	string	—	—
disabled	是否禁用	boolean	—	false
hide-on-single-page	只有一页时是否隐藏	boolean	—	-

¶Events

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页

data(){
return{
// 表格数据总数
total: 0,
// 当前页数
pageNum: 1,
// 每页条数
pageSize: 50,
keywords: '',
} }
created:{
this.getList(this.pageNum,this.pageSize)
}
methods:{
handleSizeChange(val) {
  this.pageSize= val;
  this.getList(this.pageNum,val);
},
handleCurrentChange(val) {
  this.pageNum = val
  this.getList(val, this.pageSize)
},
searchList(keywords) {
  this.getList('',this.pageNum, this.pageSize, keywords)
},

}

 

getList(pageNum,pageSize,keyWords){
　　this.loading = true
　　getAnalysisList({ 'pageNum': pageNum, 'pageSize': pageSize, 'contractId': keyWords }).then(res => {
          if(res){
            this.loading=false
          }
          if (res.data.code === '0000') {
            this.analysisTableData = res.data.data.analysis
            this.total = res.data.data.total
          }})
       }    
}