<template>
<div>
<el-input v-model="input" placeholder="請輸入關鍵字"></el-input>
<el-table
ref="multipleTable"
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[4, 8]"
:page-size="2"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
input: "",
tableList: null,
currentPage: 1,
pageSize: 8,
};
},
watch: {
tableData() {
this.currentPage = 1;
}
},
computed: {
//表名列表中搜索
tableData() {
var search = this.input.toString().toLowerCase(); //將用戶輸入的值變字符串並小寫
if (search) {
return this.tableList.filter(function(dataNews) { // 如果用戶輸入將this.tableList數組過濾返回this.tableList的key值數組，然后在key的數組中將key進行轉化成字符串變小寫再轉變的數組中是否有用戶輸入的key值，如果有返回this.tableList的key 作為this.tableData的值
return Object.keys(dataNews).some(function(key) {
return (
String(dataNews[key])
.toLowerCase()
.indexOf(search) > -1
);
});
});
}
return this.tableList;
},
total() {
return this.tableData.length;
}
},
mounted() {
console.log(this.tableData);
this.$axios.get("/datatable.json").then((res, rej) => {
this.tableList = res.data.data.tableData;
});
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(val);
},
handleSizeChange(val) {
this.pageSize = val;
console.log(this.pa)
},
handleCurrentChange(val) {
this.currentPage = val;
console.log(val);
}
}
};
</script>
這里tableData是從后台獲取的數據，在計算屬性上定義通過this.tableList賦值，這里Input賦值關鍵字查詢，分頁的當前頁通過handleCurrentChange方法獲取，分頁的每頁顯示個數選擇器通過handleSizeChange來獲取，這里tableData通過tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)方式來獲取