SOURCE

Vue.component('model', {
        props: ['list', 'isactive'],
        template: `<div class="overlay" v-show="isactive">
                        
                        
                        <div class="content">
                        <table>
                        <tr>
                        <td>用户名</td>
                        <td><input type="text" v-model="modifylist.username"></td>
                        </tr>
                        <tr>
                        <td>邮箱</td>
                        <td><input type="text" v-model="modifylist.email"></td>
                        </tr>
                        <tr>
                        <td>年龄</td>
                        <td>
                            <input type="number" v-model="modifylist.age">
                        </td>
                        </tr>
                                                
                        </table>
                        <p>
                        <input type="button" @click="changeActive" value="取消">
                        <input type="button" @click="modify" value="保存">
                        </p>
                        </div>
                        
                    </div>`,
        computed: {
            modifylist() {
                return 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',
                    age: '23'
                    
                },
                {
                    username: 'bbbbb',
                    email: 'bbbbbbb@163.com',
                    age: '23'
                    
                },
                {
                    username: 'aaabb',
                    email: 'abababab@qq.com',
                    age: '23'
                    
                }

            ]
        },
        created() {
           //console.log(Date.now());
            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: '',
                    age: ''
                    
                };
                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));
            }
            
        }
    })

<div class="container" id="app">
        <input type="button" class="add" @click="add" value="新增">
    
               
        <div>
            <table>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>年龄</th>
                   
                    <th>操作</th>

                </tr>
                <tr v-cloak v-for="(item, index) of slist">
                    <td>{{index+1}}</td>
                    <td>{{item.username}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.age}}
                    <td><a href="javascript:;" @click="showOverlay(index)">修改</a>
                        | <a href="javascript:;" @click="del(index)">删除</a></td>
                </tr>
            </table>
        </div>
        <model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
    </div>

 [v-cloak] {
            display: none;
        }

        table {
            border: 1px solid #ccc;
            padding: 0;
            border-collapse: collapse;
            table-layout: fixed;
            margin-top: 10px;
            width: 100%;
        }

        table td,
        table th {
            height: 30px;
            border: 1px solid #ccc;
            background: #fff;
            font-size: 15px;
            padding: 3px 3px 3px 8px;
        }

        table th:first-child {
            width: 30px;
        }

        .container,
        .st {
            width: ;
            margin: 10px auto 0;
            font-size: 13px;
            font-family: 'Microsoft YaHei'
        }

        .container .search {
            font-size: 15px;
            padding: 4px;
        }

        .container .add {
            padding: 5px 15px;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: ;
            height:;
            z-index: ;
            background: rgba(0, 0, 0, 0.7);
        }

        .overlay td:first-child {
            width: 66px;
        }