problem description
there is a filtering table, but it can only be filtered according to one condition. Here, we have made a multi-selection selector, hoping to achieve multi-conditional filtering
.related codes
<template>
<div class="table">
<div class="search-Box">
<el-select v-model="search" multiple placeholder="">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-table :data="tables" border style="width: 100%">
<el-table-column prop="date" label=""></el-table-column>
<el-table-column prop="name" label=""> </el-table-column>
<el-table-column prop="address" label=""></el-table-column>
</el-table>
</div>
</template>
<script>
export default{
data(){
return {
search: [], //
tableData: [
{ date: "2016-05-02",name: "", address: " 1518 " },
{date: "2016-05-04",name: "",address: " 1517 "},
{date: "2016-05-01",name: "",address: " 1519 "},
], //
options: [{
value: "",
label: ""
}, {
value: "",
label: ""
}, {
value: "",
label: ""
},],
}
},
computed:{
tables:function(){
var search=this.search;
if(search){
return this.tableData.filter(function(dataNews){
return Object.keys(dataNews).some(function(key){
return String(dataNews[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.tableData
}
}
}
</script>