vue-表格多个条件搜索筛选功能实现(模糊搜索)
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>
更多推荐
已为社区贡献1条内容
所有评论(0)