vue-表格多个条件搜索筛选功能实现(模糊搜索)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
- 在mounted中深拷贝一份数据
this.copyArr = JSON.parse(JSON.stringify(this.arr))
2. 将要搜索的条件做成对象格式
const vtw = {
name:this.input1,
age:this.input2,
height:this.input3,
}
3. 利用filter筛选方法,在筛选方法里用every方法进行多条件判断,因为是模糊搜索所以用了.includes方法,精准搜索可以将.includes改为==
const arr1 = this.copyArr.filter((item)=>{
return Object.values(vtw).every((key,index)=>{
console.log('key1',key);
return item[Object.keys(vtw)[index]].includes(key)
})
})
4. 最后将filter返回的数组替换data中的arr数组即可:this.arr = arr1
完整代码如下:
<template>
<div>
<div style="margin-top:50px">
<span>条件一(姓名):</span>
<el-input
style="width:200px;display:inline-block;margin-right:20px"
placeholder="请输入内容"
v-model="input1"
clearable>
</el-input>
<span>条件二(年龄):</span>
<el-input
style="width:200px;display:inline-block;margin-right:20px"
placeholder="请输入内容"
v-model="input2"
clearable>
</el-input>
<span>条件三(身高):</span>
<el-input
style="width:200px;display:inline-block;margin-right:20px"
placeholder="请输入内容"
v-model="input3"
clearable>
</el-input>
<el-button type="primary" @click="moreSearch()">查询</el-button>
</div>
<div class="tableClass">
<el-table
:data="arr"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="180">
</el-table-column>
<el-table-column
prop="sex"
label="性别"
width="180">
</el-table-column>
<el-table-column
prop="height"
label="身高"
width="180">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data(){
return {
input1: '',
input2: '',
input3: '',
arr:[
{
name:'小明',
age:'16',
sex:'男',
height:'156cm'
},
{
name:'小红',
age:'15',
sex:'女',
height:'150cm'
},
{
name:'小米',
age:'17',
sex:'男',
height:'168cm'
},
{
name:'小刚',
age:'16',
sex:'男',
height:'165cm'
},
{
name:'小芳',
age:'18',
sex:'女',
height:'170cm'
},
],
copyArr:[]
}
},
mounted(){
this.copyArr = JSON.parse(JSON.stringify(this.arr))
},
methods:{
moreSearch(){
const vtw = {
name:this.input1,
age:this.input2,
height:this.input3,
}
const arr1 = this.copyArr.filter((item)=>{
return Object.values(vtw).every((key,index)=>{
console.log('key1',key);
return item[Object.keys(vtw)[index]].includes(key)
})
})
this.arr = arr1
}
}
}
</script>
<style lang="less" scoped>
.tableClass{
border: 1px solid #c00;
margin-top: 50px;
}
</style>
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)