add(){
}
}
});
var app = new Vue({
el: '#app',
data: {
isActive: false,
selected: -1,
selectedlist: {},
slist: [],
searchlist: [],
list: [
{
name:'Fe1',
username: '开',
email: '221.122.62.221',
sex: '特例1',
province: '北京',
hobb:'电子机房'
},
{
name:'Fe2',
username: '关',
email: '192.168.12.222',
sex: '特例2',
province: '上海',
hobb: '服务机房'
},
{
name:'Fe3',
username: '开',
email: '127.255.255.255',
sex: '特例3',
province: '重庆',
hobb: '遥控机房'
},
{
name:'Fe4',
username: '关',
email: '223.255.255.255',
sex: '特例4',
province: '北京市',
hobb:'内网机房'
}
] },
created() {
this.setSlist(this.list);
},
methods: {
// 修改数据
showOverlay(index) {
this.selected = index;
this.selectedlist = this.list[index];
this.changeOverlay();
},
// 点击保存按钮
modify(arr) {
if (this.selected > -1) {
Vue.set(this.list, this.selected, arr);
this.selected = -1;
} else {
this.list.push(arr);
}
this.setSlist(this.list);
this.changeOverlay();
},
del(index) {
this.list.splice(index, 1);
this.setSlist(this.list);
},
changeOverlay() {
this.isActive = !this.isActive;
},
// 获取需要渲染到页面中的数据
setSlist(arr) {
this.slist = JSON.parse(JSON.stringify(arr));
},
// 搜索
search() {
var v = $('.search').val(),
self = this;
self.searchlist = [];
if (v) {
var ss = [];
// 过滤需要的数据
this.list.forEach(function (item) {
if (item.province.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.province) == -1) {
self.searchlist.push(item.province);
}
ss.push(item);
} else if (item.hobb.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.hobb) == -1) {
self.searchlist.push(item.hobb);
}
ss.push(item);
}
});
this.setSlist(ss); // 将过滤后的数据给了slist
} else {
// 没有搜索内容，则展示全部数据
this.setSlist(this.list);
}
}
},
watch: {
}
})
