vue+elementui+input输⼊框关键字筛选检索表格数据展⽰+分页
功能
第⼀种⽤axios发送请求到后台，需要后台配合，才能在表格⾥⾯渲染页⾯；想偷懒的⼩伙建议去直接粘贴复制第三种
<template>
<div class="tableDatas">
<div class="searchWord">
<div > 搜索：</div>
<el-input v-model="search" class='searchs' placeholder="请输⼊搜索内容">
</el-input>
</div>
<!-- 遍历表格 -->
<el-table
border
ref="multipleTable"
:data="tables"
tooltip-effect="dark"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="lid"
label="数量"
width="120">
</el-table-column>
<el-table-column
prop="lname"
label="名称"
width="120">
</el-table-column>
<el-table-column
prop="price"
label="价格"
show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button
size="mini"
round class='el-icon-edit'
@click="handleDelete(scope.$index, w)">修改</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页功能 -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-size="50"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
<!-- 总计 -->
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isPaging:true, //是否显⽰分页
pageIndex:1, //当前页（必传）
pageSize :20, //每页多少条
currentPage:1, //当前显⽰3页
totalNumber: 1, //总条数
totalPage:1 , //总页数
pno:'1', // 页码
// 分页功能
currentPage4: 4,
tableData:[], //后台拿来的数据
// 表单功能
itemList: [],
multipleSelection: []
}
},
computed: {
// 模糊搜索
tables () {
const search = this.search
if (search) {
// filter() ⽅法创建⼀个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。// 注意： filter() 不会对空数组进⾏检测。
// 注意： filter() 不会改变原始数组。
return this.tableData.filter(data => {
// some() ⽅法⽤于检测数组中的元素是否满⾜指定条件;
// some() ⽅法会依次执⾏数组的每个元素：
// 如果有⼀个元素满⾜条件，则表达式返回true , 剩余的元素不会再执⾏检测;
// 如果没有满⾜条件的元素，则返回false。
// 注意： some() 不会对空数组进⾏检测。
// 注意： some() 不会改变原始数组。
return Object.keys(data).some(key => {
// indexOf() 返回某个指定的字符在某个字符串中⾸次出现的位置，如果没有到就返回-1；
// 该⽅法对⼤⼩写敏感！所以之前需要toLowerCase()⽅法将所有查询到内容变为⼩写。return String(data[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.tableData
}
},
methods: {
// getData() {
// console.log('⽣命周期')
// ('../../static/database.json').then(response => {
// console.log(response.data);
// this.tableData=response.data
// }, response => {
// console.log("error");
/
/ });
// },
// 分页功能页码⼤⼩ val控制每页多少条信息
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
// this.pagesize=`${val}`;
let url=`127.0.0.1:3000/getGoodList?pageSize=${val}`
(url).then(result=>{
this.tableData=result.data.data;
})
},
/
/ 当页码数发⽣改变的时候执⾏的函数 val代表页数没问题了
handleCurrentChange(val) {
console.log( `这是${val}页`)
let url=`127.0.0.1:3000/getGoodList?pno=${val}` //pno=${this.pno++}`
(url).then(result=>{
this.tableData=result.data.data;
})
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$leRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
},
created(){
console.log('table测试页')
// this. getData();
let url='127.0.0.1:3000/getGoodList'
(url).then(result=>{
this.tableData=result.data.data;
console.log(this.tableData);
});
}
}
</script>
<style>
.
searchs{
display: inline-block;
width: 1300px;
}
</style>
第⼆种-只写查询样式-----------------------------------------------------------------------------------------------------------------------------------------<template>
<div>
<el-input v-model="tableDataName" placeholder="请输⼊姓名" ></el-input>
<el-button type="primary" @click="doFilter">搜索</el-button>
<el-button type="primary" @click="openData">展⽰数据</el-button>
<el-table
:data="tableDataEnd"
border
>
<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>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:
page-sizes="[1, 2, 3, 4]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalItems">
</el-pagination>
</div>
</template>
export default {
data() {
return {
tableDataBegin: [
{
date: "2016-05-01",
name: "王⼩虎",
address: "上海市普陀区⾦沙江路 1518 弄"
},
{
date: "2016-05-02",
name: "王⼩虎",
address: "上海市普陀区⾦沙江路 1517 弄"
},
{
date: "2016-05-03",
name: "王⼆虎",
address: "上海市普陀区⾦沙江路 1519 弄"
},
{
date: "2016-05-04",
name: "王⼆虎",tabletotal函数
address: "上海市普陀区⾦沙江路 1516 弄"
},
{
date: "2016-05-05",
name: "王三虎",
address: "上海市普陀区⾦沙江路 1518 弄"
},
{
date: "2016-05-06",
name: "王三虎",
address: "上海市普陀区⾦沙江路 1517 弄"
},
{
date: "2016-05-07",
name: "王⼩虎",
address: "上海市普陀区⾦沙江路 1519 弄"
},
{
date: "2016-05-08",
name: "王⼩虎",
address: "上海市普陀区⾦沙江路 1516 弄"
}
],
tableDataName: "",
tableDataEnd: [],
currentPage: 4,
pageSize: 2,
totalItems: 0,
filterTableDataEnd:[],
flag:false
};
},
created() {
if (alItems > this.pageSize) {
for (let index = 0; index < this.pageSize; index++) {
this.tableDataEnd.push(this.tableDataBegin[index]);
}
} else {
this.tableDataEnd = this.tableDataBegin;
}
},
methods: {
//前端搜索功能需要区分是否检索，因为对应的字段的索引不同//⽤两个变量接收currentChangePage函数的参数
if (this.tableDataName == "") {
this.$message.warning("查询条件不能为空！");
return;
}
this.tableDataEnd = []
//每次⼿动将数据置空，因为会出现多次点击搜索情况
this.filterTableDataEnd=[]
this.tableDataBegin.forEach((value, index) => {
if(value.name){
if(value.name.indexOf(this.tableDataName)>=0){
this.filterTableDataEnd.push(value)
}
}
});
//页⾯数据改变重新统计数据数量和当前页
this.currentPage=1
//渲染表格，根据值
this.currentChangePage(this.filterTableDataEnd)
//页⾯初始化数据需要判断是否检索过
this.flag=true
},
openData() {},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
this.handleCurrentChange(this.currentPage);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
//需要判断是否检索
if(!this.flag){
this.currentChangePage(this.tableDataEnd)
}else{
this.currentChangePage(this.filterTableDataEnd)
}
}, //组件⾃带监控当前页码
currentChangePage(list) {
let from = (this.currentPage - 1) * this.pageSize;
let to = this.currentPage * this.pageSize;
this.tableDataEnd = [];
for (; from < to; from++) {
if (list[from]) {
this.tableDataEnd.push(list[from]);
}
}
}
}
};
</script>
第三种：只写检索功能---------------------------------------------------------------------------------------------------------------------------------------<template>
<div class="dormitory">
<div class="searchWord">
<div > 搜索：</div>
<el-input v-model="search"
placeholder="请输⼊搜索内容">
</el-input>
</div>
<!-- // 遍历表格 -->
<div class="dormitoryData">
<el-table
border
ref="dormitoryTable"
:data="tables"
tooltip-effect="dark"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。