el-table
表格的代碼:
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄'
}]
}
}
}
</script>
上面的代碼時elementUI官方示例,簡單分析一下:el-table 里面的 :data
是數據源;el-table-column 是表格里面的每一行的數據,它里面的 prop
綁定的是 :data
數據源里面的某個屬性值,由此形成一個表格。
el-pagination
的代碼:
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[2, 5, 8, 10]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每頁 ${val} 條`);
},
handleCurrentChange(val) {
console.log(`當前頁: ${val}`);
}
},
data() {
return {
currentPage: 1,
pageSize: 5
};
}
}
</script>
上面是elementUI關於分頁器的最全功能的代碼示例,簡單分析如下:size-change
事件在當前頁面數據條數變化時觸發;current-change
事件在當前頁面跳轉到其它頁時觸發;current-page
是當前所在的頁碼;page-sizes
是可選的頁面數據條數;page-size
是默認顯示的數據條數;layout
是控制分頁器的布局,里面的內容是固定的,但是可以調換位置;total
是頁面總數據條數。
那么如何將table和pagination連接起來呢?
其實很簡單,在實現上面代碼的前提下,將el-table 表格中綁定的 data 數據源做如下修改即可:
:data="tableData.slice((currentPage - 1) * pageSize, currentPage*pageSize)"
這段代碼什么意思呢?這就又涉及到基礎知識了--數組的方法,更多關於js內置對象及其方法可以參考這篇文章
首先是數組的 .slice
方法,用來截取數組,它接受收兩個參數,第一個是開始的索引值,第二個是結束的索引值。截取的數組的值放在一個新的數組中,但是不包含結束的索引對應的元素值。
所以,當前頁為第一頁時 data 數據源為 從第0條到第 pageSize 條,而當currentPage或者pageSize發生改變時,data數據源也會跟着變化,因此就實現了分頁器與表格的連接。
參考文章: https://blog.csdn.net/weixin_44093954/article/details/87879012