vue中关键字的搜索，输入关键字列表和分页一起刷新

接着上篇文章，这个是关键字的搜索，输入关键字进行搜索的时候，列表的数据和分页跟着一起改变

<template><div class="all"><div class="top"><el-inputplaceholder="输入检索的关键字"size="medium"v-model="searchForm.contentName"@keyup.enter.native="search"><template #suffix><i class="el-icon-search el-input__icon" @click="getListTable(1)"/></template></el-input></div><div class="mid"><el-table@row-dblclick="dbClickDetail":data="tableData"class="jk-table"style="width: 100%"><el-table-column type="index" align="center" label="序号"></el-table-column><el-table-column prop="checkContentName" align="center" label="检查内容"></el-table-column><el-table-column prop="checkNum" align="center" label="检查项数量"></el-table-column><el-table-column prop="itemNum" align="center" label="标准条款数量"></el-table-column></el-table></div><div class="footer"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="searchForm.pageIndex":page-sizes="[15,30,45,60]":page-size="searchForm.pageSize"layout="total, prev, pager, next, jumper":total="totalCount"></el-pagination></div></div>
</template><script>
import { getQualitySafetyItems } from "@/services/index";
export default {data(){return{searchForm:{pageIndex: 1, //默认页码是第一页pageSize: 15, //默认显示的条数contentName: "" //关键字},totalCount: 0,},methods:{//获取列表getListTable(){getQualitySafetyItems(this.searchForm).then(({data,totalCount})=>{this.tableData = data;this.totalCount = totalCount})},//搜索关键字search() {this.searchForm.pageIndex = 1; //初始化当前所在页数this.getListTable(); //获取数据},// 每条条数变化的回调处理handleSizeChange(val){// val变化后的每页的条数this.searchForm.pageSize = val;//更新每页的条数this.getListTable();//重新获取列表数据},// 页码变化的回调处理handleCurrentChange(val){//val 变化后的页码this.searchForm.pageIndex = val;this.getListTable();//重新获取列表数据}}}
}
</script>
<style lang="scss" scoped>
.top {.el-button {font-size: 15px;margin: 30px 40px 20px 30px;}
.jk-table{color:#ccc
}
.footer {margin-top: 20px;text-align: right;
}
</style>

效果图如下：

vue中关键字的搜索，输入关键字列表和分页一起刷新相关推荐

UE4中蓝图实现输入框输入关键字搜索对应东西
一.目的 1.想知道:UE4中蓝图实现输入框输入关键字搜索对应东西二.参考 1.UE4 高级游戏功能系统教程-搜索查询系统-P3 搜索功能开发(完结篇) https://www.bilibili.c ...
vue下拉框可输入关键字进行模糊查询
vue下拉框可输入关键字进行模糊查询在<el-select>中,加上 filterable 即可(v-model.trim:是过滤输入的空格),clearable:输入框带清空输入内容的 ...
Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...
vue中如何实时修改输入的值
vue中如何实时修改输入的值经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想 ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)
一.antd vue中的a-select的动态加载列表a-select-option 1.既然是动态加载选择框的列表a-select-option,必然存在获取后台数组,并循环后台数组格式: 数组( ...
vue实现一个带搜索功能的列表_（Vue起步）2.模板指令：v-for / v-on / v-model
①公众号:王酱酱记 ②记录跟着文档学习Vue的一些关键点,持续更新.感兴趣的小白建议关注一下 ③Vue当中有几个常见的指令,看看是怎么用的,强烈建议你自己在编辑器里打一遍,你就更明白Vue为什么是数据 ...
VUE中自定义一个获取输入车牌号码组件
VUE自定义一个组件来选择输入车牌号码展示样式: 组件事件列表: 事件名称 event 获取车牌 @carNum 返回参数是个数组,每个车牌元素上代码: <template><d ...
在vue中使用velocity动画库实现列表交错过渡
这个消息通知组件,我点击清空通知后,想要清除里面的信息,如果直接清空是下面这样的: 可以看出这样会显得非常生硬,再来看加上过渡之后的: 是不是感觉不一样了,这实际上是用velocity动画库实现的: ...

vue中关键字的搜索，输入关键字列表和分页一起刷新

接着上篇文章，这个是关键字的搜索，输入关键字进行搜索的时候，列表的数据和分页跟着一起改变

vue中关键字的搜索，输入关键字列表和分页一起刷新相关推荐

最新文章

热门文章