1、foreach
foreach循环对不能使用return来停止循环
1 search(keyword){ 2 var newList = [] 3 this.urls.forEach(item =>{ 4 if(item.name.indexOf(keyword) != -1){ 5 newList.push(item) 6 } 7 }) 8 return newList 9 }
2、filter
item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组
1 search(keyword){ 2 return this.urls.filter(item =>{ 3 if(item.name.includes(keyword)){ 4 return item 5 } 6 }) 7 }
3、findIndex
返回true后index就可以获取到匹配的元素在进行删除
del(row){
this.$confirm("确定要删除吗?", "删除").then(action=>{
var index = this.urls.findIndex(item =>{
if(item.name == row.name){
return true;
}
})
this.urls.splice(index, 1)
});
4、some
如果匹配成功就return true跳出some的循环
del(row){
this.$confirm("确定要删除吗?", "删除").then(action=>{
this.urls.some((item, i) =>{
if(item.name == row.name){
this.urls.splice(i, 1)
return true;
}
})
});
}
5、上例子,在一个vue的data中存入一个固定的数组,对数组进行遍历,实现搜索功能,删除功能
在el-table中 :data中绑定一个方法,方法中对固定的数组urls进行遍历,返回一个新的数组实现搜索功能
"search(keyword)" size="small" :stripe="true" :border="true" @select="select" @select-all="select"> "selection"> "index"> "网站名" prop="name" width="200"> "slot"> "slot.row.url" target="_blank">{{slot.row.name}} "网址" prop="url"> "类型" prop="type" width="50"> "国家" prop="country" width="50"> "操作" width="50"> "slot"> "mini" type="text" icon="el-icon-delete" @click="del(slot.row)"> "left">表格操作 "batchDelete" type="danger" icon="el-icon-delete" size="small">批量删除
6、效果图为
参与评论
手机查看
返回顶部