生活随笔
收集整理的這篇文章主要介紹了
elementUi设置表格分页排序
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
elementUi設置表格分頁排序
(scope.$index+1)+(tableModel.pageNum-1)*(tableModel.pageSize)
效果圖
<template
><el
-table
:data
="tableData"style
="width: 100%"height
="250"size
="mini"><el
-table
-columnlabel
="序號"align
='center'><slot slot
-scope
="scope"><span
>{{(scope
.$index
+1)+(tableModel
.pageNum
-1)*tableModel
.pageSize
}}</span
></slot
></el
-table
-column
><el
-table
-columnprop
="faultKindName"label
="故障原因"align
='center'width
="480":show
-overflow
-tooltip
='true'></el
-table
-column
><el
-table
-columnprop
="deviceNum"label
="故障次數"align
='center'></el
-table
-column
><el
-table
-columnprop
="address"label
="操作"align
='center'><slot slot
-scope
="scope"><el
-button type
="text" style
="color:#0300F1" @click
="repairNum(scope.row.faultKindId)">查看
</el
-button
></slot
></el
-table
-column
></el
-table
><div
class="pst_page"><el
-pagination@size
-change
="handleSizeChange"@current
-change
="handleCurrentChange":current
-page
="tableModel.pageNum":page
-sizes
="[10, 20, 30, 40,50,60,70,80,90,100]":page
-size
="tableModel.pageSize"layout
="total, sizes, prev, pager, next, jumper":total
="tableModel.total"></el
-pagination
></div
>
</template
>
<script
>
export default {data(){return {tableData
:[],tableModel
:{pageNum
:1,pageSize
:10,total
:0,faultTimeStart
:'',faultTimeEnd
:''},}}methods
:{getStatisticsKind(){statisticsKind(this.tableModel
).then(res
=>{let {code
,data
}=res
if(code
==10000){this.tableData
=data
.data
this.tableModel
.total
=data
.total
}})},}
}
</script
>
總結
以上是生活随笔為你收集整理的elementUi设置表格分页排序的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
