Element--前端分页

表格写法：

<el-table :data="tablist.slice((pageindex-1)*pageSize,pageindex*pageSize)" style="width: 100%">

主要作用：tablist.slice((pageindex-1)*pageSize,pageindex*pageSize)  从后端获取的数据中截取一个区间数据

tablist：后端传过来的数据

分页写法：

<el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"  @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页"></el-pagination>

 total:0, // 总条数

 pageSize:10,  // 显示条数

 pageindex:1   // 默认显示第一页

// 分页 页码改变触发

   handleCurrentChange(val){

      this.pageindex=val

    }

或者：

.btn-prev:before{
    content: "上一页";
}
.btn-next:before{
    content: "下一页";
}

直接修改样式

注意：

1.  slice：截取，end取不到  pageSize：每页要显示的条目数  pageindex：当前页码
2. pageIndex-1：获取前一页的页码（前一页*显示条数---当前页*显示条数=一个显示区间）

前端排序

表格：

<el-table

v-loading.body="loading_list"

:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"

@sort-change="sortChangeMethod1"

:default-sort="{prop: 'user_count', order: 'descending'}"

style="width: 100%">

<el-table-column

prop="share_count"

label="分享次数"

sortable="true"

>

</el-table-column>

</el-table>

方法：

sortChangeMethod1(column) {

const _this = this;

let arrSymbol = this.tableData;

this.column1G = column;

// 遍历完成之后把`%`，`,` 过滤

for (var item in arrSymbol) {

for (var item1 in arrSymbol[item]) {

if (item1 == 'new_count' || item1 == 'share_count' || item1 == 'share_reflux_ratio' || item1 == 'share_open_count' || item1 == 'share_user_count') {

arrSymbol[item][item1] = String(arrSymbol[item][item1]).replace(/[%,]/g, '');

}else if(item1=='hour') {

arrSymbol[item][item1] = String(arrSymbol[item][item1]).substr(0, 2)

}else if(item1=='day'){

var date = arrSymbol[item][item1].replace(/-/g,'/'); //必须把日期'-'转为'/'

var timestamp = new Date(date).getTime();

arrSymbol[item][item1] = String(timestamp)

}

}

}

// 把时间转成时间戳

 

// 排序

arrSymbol.sort(function (b, a) {

if (column.order == 'ascending') {

return b[column.prop] - a[column.prop];

} else {

return a[column.prop] - b[column.prop];

}

})

 

console.log(arrSymbol)

 

// 遍历完成之后把`%`，`,` 还原

for (var item in arrSymbol) {

for (var item1 in arrSymbol[item]) {

if (item1 == 'share_reflux_ratio') {

arrSymbol[item][item1] = arrSymbol[item][item1] + '%';

}

if (item1 == 'new_count' || item1 == 'share_count' || item1 == 'share_open_count' || item1 == 'share_user_count') {

arrSymbol[item][item1] = regStrSymbol(arrSymbol[item][item1]);

}

if(item1=='hour'){

arrSymbol[item][item1] = arrSymbol[item][item1] +':'+'00'+' '+'-'+' '+arrSymbol[item][item1]+':'+'59'

}

if(item1=='day'){

var date2 = new Date(parseInt(arrSymbol[item][item1]));//根据时间戳生成的时间对象

var Y2 = date2.getFullYear() + '';

var M2 = (date2.getMonth() + 1 < 10 ? '0' + (date2.getMonth() + 1) : date2.getMonth() + 1) + '';

var D2 = date2.getDate() < 10 ? '0' + date2.getDate() : date2.getDate();

arrSymbol[item][item1]=Y2+'-' + M2+'-' + D2

}

}

}

// 渲染

this.tableData = arrSymbol

 

},