element-ui input里面选择匹配项，点击后过滤出table表格中符合条件的数据

[Wesleyblue]

<template>
<div class="box" style="margin-top: 20px;">
<!--搜索框-->
<div style="float: right;margin: 20px;">
<el-autocomplete
class="inline-input"
v-model="ss"
:fetch-suggestions="search"
icon="search"
placeholder="请输入内容"
:trigger-on-focus="false"
@select="sl()"
:on-icon-click="cl">
</el-autocomplete>
</div>
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%" @row-dblclick="go" :filter-change="filters">
<el-table-column prop="value" label="路口名" width="100" header-align='center'>
</el-table-column>
<el-table-column prop="hao" label="路口号" width="80" header-align='center'>
</el-table-column>
<el-table-column prop="address" label="地址" width="200" header-align='center'>
</el-table-column>
<el-table-column prop="status" label="状态" width="80" header-align='center'>
</el-table-column>
<el-table-column prop="date" label="时间" width="200" header-align='center'>
</el-table-column>
<el-table-column prop="plan" label="配时方案" width="100" header-align='center'>
</el-table-column>
<el-table-column prop="work" label="工作方式" width="200" header-align='center'>
</el-table-column>
<el-table-column prop="phase" label="相位配时(序号和方向)" header-align='center'>
<template slot-scope="scope">
<span v-for="(k,v) in scope.row.phase['seq']">
{{k}}
<span v-if = "v === scope.row.phase['cur'][0]">
<span v-if="scope.row.phase['cur'][3] ===0" style="color:red">{{scope.row.phase['cur'][1]}}</span>
<span v-if="scope.row.phase['cur'][3] ===1" style="color:yellow">{{scope.row.phase['cur'][1]}}</span>
<span v-if="scope.row.phase['cur'][3] ===2" style="color:greenyellow">{{scope.row.phase['cur'][1]}}</span>
<span>/</span>
<span style="color:blue">{{scope.row.phase['cur'][2]}}</span>
</span>
</span>
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 30px;">
<span class="demonstration"></span>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" prev-text="上一页" next-text="下一页">
<!--<el-table stripe style="width: 100%">

</el-table>-->
</el-pagination>

</div>

<!--弹窗-->
<div>
<el-dialog :visible.sync="show" width="100%">
<elementy :row="rowData"></elementy>
</el-dialog>

</div>
</div>

</template>
<script>
import elementy from './element'
export default {

components: {

elementy
},
data() {
return {
ss:'',
restaurants: [],
state1: '',
state2: '',
rowData: '',
show: false,
currentPage: 1,
pagesize: 5,
tableData: [{
'value': '测试路口1',
'hao': '06',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [1, 12, 24, 1]
}
}, {
'value': '测试路口2',
'hao': '07',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [2, 12, 24, 2]
}
}, {
'value': '测试路口3',
'hao': '08',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [1, 12, 24, 0]
}
}, {
'value': '测试路口4',
'hao': '09',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [0, 12, 24, 1]
}
}, {
'value': '测试路口5',
'hao': '10',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [1, 12, 24, 2]
}
}, {
'value': '测试路口6',
'hao': '11',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [3, 12, 24, 2]
}
}, {
'value': '测试路口7',
'hao': '12',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [3, 12, 24, 0]
}
}, {
'value': '测试路口8',
'hao': '13',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [3, 12, 24, 3]
}
}, {
'value': '测试路口9',
'hao': '14',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [2, 12, 24, 3]
}
}, {
'value': '测试路口10',
'hao': '15',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [2, 12, 24, 0]
}
}, {
'value': '测试路口11',
'hao': '16',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [2, 12, 24, 1]
}
}, {
'value': '测试路口12',
'hao': '17',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [1, 12, 24, 1]
}
}, {
'value': '测试路口13',
'hao': '18',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [1, 12, 24, 2]
}
}, {
'value': '测试路口14',
'hao': '19',
'address': '192.168.212.210',
status: '联网',
date: '2018年6月26日10:00',
plan: '05',
work: '单点定周期',
phase: {
'seq': ['南北直行', '南北左转 ', '东西直行', '东西左转'],
'cur': [0, 12, 24, 2]
}
}]
}
},

// props: ['111'],
methods: {
//双击事件
go(row) {

// console.log('1');
this.rowData = row;
this.show = true
},
// 分页
handleSizeChange: function(size) {
this.pagesize = size;
},
handleCurrentChange: function(currentPage) {
this.currentPage = currentPage;
},
// 搜索框
sl(){
//选中下拉列表的处理函数
console.log(this.ss);
console.log(1)
// 改变from表单显示


},
cl(){
//点击icon图标的处理函数，实际中我们的调用搜索接口，获取数据等等
console.log(this.ss);
console.log(2)
},
search(a, cb) {
var tableData = this.tableData;

// var tableDatas = [{'value':'上海2'}]
// var tableDatas = a ? tableData.filter(this.createFilter(a)) : tableData;

if(a){
var t1 = tableData.filter(this.createFilter1(a));
// var t2 = tableData.filter(this.createFilter2(a));
// var t3 = tableData.filter(this.createFilter3(a));
}else{
//return all
}
//t1 += t2;
// var tableDatas = [];
// tableDatas.push(t1);
// tableDatas.push(t2);
// tableDatas.push(t3);
console.log(t1);
// 调用 callback 返回建议列表的数据
//我们也可以判断条件直接赋值cb的处理参数
//var tt =['1','2','3'];
cb(t1);
},
createFilter1(a) {
return (tableData) => {
//这里有一个坑，你如果更改value属性名称代码不报错，结果将无法筛选，永远为空，尝试了多次没有成功，用原生处理筛选，直接赋值cb的参数都不行，一定要属性值为value
let v = false;
if(tableData.value.indexOf(a) != -1){
v = true;
}
if(tableData.hao.indexOf(a) != -1){
v = true;
}
if(tableData.address.indexOf(a) != -1){
v = true;
}
return v;
};
},
},
mounted() {
}

}
</script>