前端模糊查询当前列表

前端模糊查询当前列表 js

说明： this.accountDetailsData 和 this.accountDetailsDataOld 的值都是一样的 前端自己查询 有3个数组 一个遍历 一个搜索的时候用 一个搜索条件为空的时候为全部的数据

1.在html页面

  <el-table stripe :data="searchInputAccount ?accountDetailsData : accountDetailsDataOld" border style="width: 100%;margin-top: 15px">

2. input输入框

 <el-input placeholder="模糊搜索当前页" v-model="searchInputAccount" @input="searchAccountPage"><i slot="prefix"class="el-input__icon el-icon-search"></i></el-input>

3. 方法

  // 模糊搜索当前页账单 账单private searchAccountPage() {if (this.searchInputAccount) {// 搜索的时候let arr: any = []this.accountArr.map((v, index) => {if (String(Object.values(v)).indexOf(this.searchInputAccount.trim()) > -1) {arr.push(v)}})this.accounTotal =  arr.lengththis.searchArr = arr // 搜索的数据源this.accountDetailsData = arr.slice(0, 10)  // 10条每页} else {//  清空搜索的时候this.accounTotal = this.accountArr.lengththis.accountPageNoChange(1)  // 重置初始页码this.accountPageSizeChange(10)// 重置初始条数return this.accountDetailsDataOld && this.accounTotal}}

4. 方法 当页码变动的时候

 // 账户详细信息 分页 切换页码private accountPageNoChange(val) {let arr:any = []arr =  this.searchInputAccount !==''? this.searchArr:this.accountArr  // 在搜索条件下的数据源需要替换this.accountpageNo = val;this.accountDetailsData = arr.slice((val - 1) * this.accountpageSize, val * this.accountpageSize)this.accountDetailsDataOld = this.accountDetailsData}

5. 方法 当条数变动的时候

// 账户详细信息 分页 条数private accountPageSizeChange(val) {let arr:any = []arr =  this.searchInputAccount !==''? this.searchArr:this.accountArr  // 在搜索条件下的数据源需要替换this.accountpageSize = val;this.accountpageNo = 1;this.accountDetailsData = arr.slice((this.accountpageNo - 1) * this.accountpageSize, this.accountpageSize)this.accountDetailsDataOld = this.accountDetailsData;}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！