Vue.component('model', { props: ['list', 'isactive'], template: `

新增 | 修改

用户名
邮箱
性别	男女未知
省份
爱好	篮球读书插画编程弹琴

`, computed: { modifylist() { return JSON.parse(JSON.stringify(this.list)); } }, methods: { changeActive() { this.$emit('change'); }, modify() { this.$emit('modify', this.modifylist); } } }); var app = new Vue({ el: '#app', data: { isActive: false, // 是否显示弹窗 selected: -1, // 选择了哪条记录 selectedlist: {}, // 选中的信息 slist: [], searchlist: [], list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', province: '河北省', hobby: ['弹琴', '读书', '插画'] }, { username: 'aaabb', email: 'abababab@qq.com', sex: '女', province: '重庆市', hobby: ['篮球'] }, { username: 'cccccc', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'dddddd', email: 'bbbbbbb@163.com', sex: '女', province: '河北省', hobby: ['弹琴', '读书', '插画'] }, { username: 'eeeee', email: 'abababab@qq.com', sex: '女', province: '重庆市', hobby: ['篮球'] } ] }, 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(); }, add: function() { this.selectedlist = { username: '', email: '', sex: '男', province: '北京市', hobby: [] }; this.selected = -1; this.isActive = true; }, // delete list in index location 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(e) { var v = e.target.value, self = this; self.searchlist = []; if (v) { var ss = []; // 过滤需要的数据 this.list.forEach(function(item) { if (item.username.indexOf(v) > -1) { if (self.searchlist.indexOf(item.username) == -1) { self.searchlist.push(item.username); } ss.push(item); } else if (item.email.indexOf(v) > -1) { if (self.searchlist.indexOf(item.email) == -1) { self.searchlist.push(item.email); } ss.push(item); } }); this.setSlist(ss); // 将过滤后的数据给了slist } else { // 没有搜索内容，则展示全部数据 this.setSlist(this.list); } } }, watch: {} });