标签：search 分页 表格 前端 vm searchKeyword let arr data
1、template
<el-input
prefix-icon="el-icon-search"
placeholder="输入关键词搜索"
v-model="searchKeyword"
style="width: 300px;border: #cccccc"
clearable>
</el-input>
<el-table
v-loading="listLoading"
element-loading-text="获取数据中，请耐心等待"
height="100%"
:data="tbdata"
border
style="width: 100%">
。。。
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCells">
</el-pagination>
2、data
searchKeyword: ''
3、computed
computed: {
tbdata () {
return this.searchFilterWord()
}
}
4、methods
// table数据入口（tbdata）
searchFilterWord () {
let data = this.allData
let vm = this
// console.log(data)
let search = data.filter((val) => {
if (val.name.includes(vm.searchKeyword) || val.imei.toString().includes(vm.searchKeyword)) {
return true
}
})
vm.totalCells = search.length
let arr = []
for (let i = (vm.currentPage - 1) * vm.pageSize; i < vm.currentPage * vm.pageSize; i++) {
if (!search[i]) {
break
}
arr.push(search[i])
}
return arr
},
标签：search,
分页,
表格,
前端,
vm,
searchKeyword,
let,
arr,
data
From： https://www.cnblogs.com/luckyShuang/p/16809330.html