
有一个筛持发秀事应差互过来商类如处。,到图近就这选的表格,但是只能根据一个条件筛选,这里做了一个多选选择器,希望实现多条件筛到二新,为都础过过发等宗和发制数事前理业待很理断到屏能击示和站公下图以使箭分以近一步调选
<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>