效果图
1.建立html结构(使用Vue所以使用一个大的div来包含所有的html结构)
<div id="table">
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(item,index) in array" v-show="index >= start && index<= end">
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.sex}}</td>
<td>{
{item.age}}</td>
<td>
<button @click="xiugai( index )" >修改</button>
<button @click="del( index )">删除</button>
<button @click="add">新增</button>
</td>
</tr>
</tbody>
</table>
<!--翻页的内容-->
<div id="ye">
<button @click="pre">上一页</button>
<span> <button v-for="page in Math.ceil(array.length/5)"
@click="tiao(page)">{
{page}}</button></span>
<button @click="next">下一页</button>
</div>
<!-- 修改框-->
<!--修改框-->
<from class="xiugai" v-show="isShow" >
<label for="id">序号</label>
<input id="id" type="text" disabled v-model="messageid" >
<br>
<label for="usename">姓名</label>
<input id="usename" type="text" v-model="messagename" ref="name" >
<br>
<label for="sex">性别</label>
<input id="sex" type="text" v-model="messagesex" ref="sex">
<br>
<label for="age">年龄</label>
<input id="age" type="text" v-model="messageage" ref="age">
<br>
<button type="button" id="change" @click="gai">修改</button>
<button type="button" id="display" @