根据select框选中的值,和搜索框中的值进行筛选判断
<iframe width='100%' height='500px' src="//player.bilibili.com/player.html?aid=972816205&bvid=BV1hp4y1b72G&cid=329063907&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
//获取表格数据的方法
async getTableList() {
this.loading3 = true
const { data: res } = await Axios.get('http://192.168.3.68:9090/system/info/list', {
params: this.queryInfo
})
this.loading3 = false
if (res.code !== 200) {
return this.$message.error('获取用户列表失败!')
}
//这步必须写在筛选之前
this.tableData = res.rows
this.total = res.tota
//select框筛选
let { companyName, houseNum, searchValue } = this.queryInfo
// 两个select都有值
if (houseNum && companyName) {
console.log('两者都有值')
this.tableData = res.rows.filter((item) => {
let company = item.companyName
let house = item.housenum
return company.includes(this.v1) && house.includes(this.v3)
})
}
//小区名有值
if (companyName && !houseNum) {
this.tableData = res.rows.filter((item) => {
let company = item.companyName
return company.includes(this.v1)
})
}
//房间号有值
if (houseNum && !companyName) {
this.tableData = res.rows.filter((item) => {
let house = item.housenum
return house.includes(this.v3)
})
}
//搜索框筛选
if (searchValue) {
this.tableData = res.rows.filter((item) => {
return item.ownerdisname.includes(searchValue)
})
}
},
<el-select
v-model='queryInfo.companyName'
placeholder='请选择小区名'
:class="'colorChange iconRight'"
@change='companyClick'>
<el-option v-for='(item, index) in value1' :value='item'></el-option>
</el-select>
<el-select
v-model='queryInfo.houseNum'
placeholder='请选择房间号'
:class="'colorChange iconRight'"
@change='houseClick'>
<el-option v-for='(item, index) in value3' :value='item'></el-option>
</el-select>
<!-- 搜索框 -->
<el-input
clearable placeholder='请输入业主姓名'
v-model='queryInfo.searchValue'
@clear='getTableList'
@keyup.enter.native="getTableList">
<el-button
slot='append'
icon='el-icon-search'
@click='getTableList'>搜索</el-button>
</el-input>