<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=" 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)方式来获取