SOURCE

Vue.component('td-item',{
  template:`
<tr>
	<td>{{name}}</td>
	<td>{{age}}</td>
	<td>
		<button v-on:click="$emit('remove')">删除</button>
	</td>
	<td>
		<button v-on:click="$emit('edit')">编辑</button>
	</td>
</tr>
`,
  props:['name','age']   
})
new Vue({
  el: '.container',
  data: {
    show:false,
    currentpage:1,
    btn:1,
    idx:0,
   
    message1:'',
    message2:'',
    
    items:[
      
    
      {
      id: 1,
      name: 'Tom',
      age:23
    },
    {
      id: 2,
      name: 'Mary',
      age:23
    }
    ],
    nextitemid:0

  },
  methods:{
    //添加
    addname:function(){
      
      if(this.message1!=''&&this.message2!=''){
      	this.items.push({
        	id:this.nextitemid++,
       		name:this.message1,
        	age:this.message2
      	})
      }
      this.message1='',
      this.message2='',
      this.show='false'
      
    },
    edit:function(index){
      this.idx=index;
      this.message1=this.items[index].name;
      this.message2=this.items[index].age;
      this.show=true;
      this.btn=2
    },
    //更新
    update:function(idx){
      //console.log(this.message2)
      if(this.message1!=''&&this.message2!=''){
    		this.items.splice(idx,1,{
      		id:this.nextitemid,
       		name:this.message1,
        	age:this.message2
    		})
      }
   			this.message1='',
      	this.message2='',
      	this.show=false
    
      
      
  }
  }
})

<div class="container">
  <div class="sidebar">
    <ul>
      <li v-on:click="currentpage=1">
        1
      </li>
      <li v-on:click="currentpage=2">
        2
      </li>
      <li v-on:click="currentpage=3">
        3
      </li>
    </ul>
  </div>
  <div class="right">
    <div class="show1" v-show="currentpage===1">
      <button v-on:click="show=!show,btn=1">
        
        添加
      
      </button>
      <div class="table">
      <br />
      <table>
        <tr>
          <th>name</th>
          <th >age</th>
          <th colspan="2">操作</th>
        </tr>
        <tr
            is="td-item"
              v-for="(item,index) in items"
              v-bind:key="item.id"
              v-bind:name="item.name"
              v-bind:age="item.age"
              v-on:remove="items.splice(index, 1)"
              v-on:edit="edit(index)"
        >
          
        </tr>       
      </table>
    </div>                 
        <div class="form" v-show="show">    
        <input type="text"               
               v-model="message1" 
               placeholder="请输入name"
               />
       
      <input type="number"
             v-model="message2"
             onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
             placeholder="请输入age"
             />
        <button v-on:click="addname"  v-show="btn===1">
          提交
        </button>
        <button  
               v-on:click="update(idx)"
                v-show="btn===2">
          更新
        </button>
    </div>   
    </div>
    <div class="show2" v-show="currentpage===2">这是第二页</div>
    <div class="show3" v-show="currentpage===3">这是第三页</div>
  </div>
</div>

.container {
  height: 300px;
}

.sidebar {
  float: left;
  width: 20%;
  height: 100%;
  background: #EEE5DE;
}

ul {
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
ul li{
  
}
ul li:hover {
  background:#F0F8FF;

}

.right {
  width: 80%;
  height: 100%;
  background: #FFDAB9;
  float: right;
}

table {
  border-collapse: collapse;
}

td {
  width: 50px;
  border: 1px solid blue;
}