vue聊天记录分页效果（vuetify 分页）

vue数据加载分页功能

我们在手机端加载数据时，一般需要请求历史数据时，需要进行分页，因为手机运行需要快，所以不做一下子加载太多条的数据

这里我们用的是vue-infinite-loading这个插件来实现

npm install vue-infinite-loading --save 或者

yarn add vue-infinite-loading

注意，你的数据显示内容区需要设置CSS

vue.js中怎么实现分页显示

vuetable listdata="{{datalist}}" clickcallback="{{callback}}"/vuetable

pages pages="{{@ pages}}" clickhandle="{{search}}"/pages

其中vuetable组件负责数据展示功能，里面内容暂且不表，pages组件实现分页功能，如下：

div

ul

li v-on="click:leftclick" v-show="leftbtn"a《/a/li

li class="bf61-b20a-c448-d777 pageindex" v-repeat="showlength" v-on="click:clickhandle(currentIndex+$index,$event)"a{{currentIndex+$index}}/a/li

li v-on="click:rightclick" v-show="rightbtn"a/a/li

/ul

/div

class为pageindex的 li 的点击事件里面将 要显示的index 传给 props传递过来的 clickhandle,

clickhandle会根据index，返回后更新 datalist，完成分页功能。

关于 VUE EL-TABLE 记录分页、记录选中行、记录滚动条光标

一：首先 创建 el-table

el-table

ref="BaseTable"//设置 ref属性

:highlight-current-row="true"//高光选中行

:current-row-key="NowRowIndex"//行号

:row-class-name="tableRowClassName"//装载 EL-TABLE前执行的 方法 会遍历每一行 每一个单元格

@row-click="BaseRowClick"//添加行点击事件

二：添加 分页 组件 细节在于 :current-page.sync="currentPage" 不写这句 无效

el-pagination

:current-page.sync="currentPage"

layout="prev, pager, next"

@current-change="current_change"//选中页 改变事件

:total="total"//总行数

:page-count="AllPageCount"//总页数

:page-size="pagesize"//每页显示的行数

background

/el-pagination

三：current_change（）选中页 改变事件 记录当前选中的行号

current_change:function(currentPage){

this.currentPage = currentPage;

this.LastPageCount = currentPage

this.SetCreenRow(this.BaseInfoList[this.SelectDataIndex])

}

四：tableRowClassName（）方法，给EL-TABLE设置行号

tableRowClassName ({row, rowIndex}) {

row.row_index = rowIndex;

}

五：行点击事件

BaseRowClick(row, column, event){

this.NowRowIndex = row.row_index;//记录点击行的行号

this.NowSelectNum = row.SuppliesNum//记录行数据中的一个唯一键 以便 绑定 记录的选中行

//记录点击行时的 纵轴滚动条位置

let vmEl = this. el

const scrollParent = vmEl.querySelector('.el-table__body-wrapper')

this.Nowscroll = scrollParent.scrollTop

}

六：刷新列表的方法 内 绑定 之前 选中的 页码 行 及 滚动条位置

//选中 之前记录的 分页页码

this.current_change(this.LastPageCount);

//设置 滚动条到之前记录的位置 细节在于必须加 setTimeout 否则无效

setTimeout(() = {

this.$refs.BaseTable.bodyWrapper.scrollTop = this.Nowscroll

}, 13)

vue+element-ui分页功能

vue+element-ui分页功能

分页代码：

el-pagination p="" /el-pagination

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="queryInfo.pagenum"

:page-sizes="[5, 10, 15, 20]"

:page-size="queryInfo.pagesize"

layout="total, sizes, prev, pager, next, jumper"

:total="total"

@size-change 绑定切换每页记录数事件

@current-change 切换页码事件

current-page当前页，传给后端

page-sizes 每页记录数数组

page-size：当前每页显示的记录数

layout:布局样式

total：总页数

配合后端接口完成