vue 2.0 用filter做表單搜尋
阿新 • • 發佈:2019-01-05
JS部分
search: '',
systManage: [
{
type: "未知",
source: "資料庫",
operation: "系統管理",
content: "查看了系統管理",
hot: "192.168.110",
time: "2017/12/05"
},
htnl 部分computed:{ searchData:function(){ var search =this.search; if(search){ return this.systManage.filter(function(pro){ return Object.keys(pro).some(function(key){ return String(pro[key]).toLowerCase().indexOf(search)>-1 }) }) } return this.systManage; } }
<el-input placeholder="請輸入搜尋內容" v-model="search" style="width: 300px;">
<template slot="append">
<el-button slot="append" icon="el-icon-search"></el-button>
</template>
</el-input>
input 搜尋框 要繫結v-model="search"這個變數.其中systManage是你的資料變數名。
在渲染 時候,將v-for="(data,index) in systManage"改為(data,index) in searchData 即可。