完整代码部分 (仅供参考哈)：
1 <template> 2 <div> 3 <label prop="name"> 姓名： </label> 4 <Input v-model="companyName" id="pp" style="width: 120px" placeholder="请输入" /> 5 <Button @click="search" type="primary" icon="ios-search">查询</Button> 6 <Button type="primary" @click="addBus" icon="ios-add-circle-outline">新增</Button> 7 <Table :columns="columns1" :data="data1" size="small" ref="table"> 8 <template slot-scope="{ row }" slot="name"> 9 <strong>{{ row.name }}</strong> 10 </template> 11 <template slot-scope="{ row, index }" slot="action"> 12 <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button> 13 <Button type="warning" style="margin-right: 5px" size="small" @click="editBus(row,index)">编辑</Button> 14 <!-- 前面的小图标会居中挡住文字 设置一下样式就好了 style="text-align:left" --> 15 <Poptip 16 style="text-align:left" 17 confirm 18 title="您确定要删除该信息?" 19 placement="left-end" 20 @on-ok="remove(index)" 21 @on-cancel="cancel1" 22 > 23 <Button type="error" size="small">删除</Button> 24 <!-- @click="remove(index)" --> 25 </Poptip> 26 </template> 27 </Table> 28 <Modal 29 v-model="handleModal" 30 title="新增一条数据" 31 @on-ok="ok" 32 @on-cancel="cancel" 33 :footer-hide="true" 34 :mask-closable="false" 35 width="820" 36 @on-visible-change="handleReset('formValidate')" 37 > 38 <Form inline ref="formValidate" :model="formValidate" :label-width="80" :rules="ruleValidate"> 39 <FormItem label="姓名" prop="name"> 40 <Input v-model="formValidate.name" placeholder="请输入姓名"></Input> 41 </FormItem> 42 <FormItem label="年龄" prop="age"> 43 <Input v-model="formValidate.age" placeholder="请输入年龄"></Input> 44 </FormItem> 45 <FormItem label="爱好" prop="address"> 46 <Input v-model="formValidate.address" placeholder="请输入你的爱好"></Input> 47 </FormItem> 48 <FormItem label="性别" prop="sex"> 49 <Input v-model="formValidate.sex" placeholder="别不男不女"></Input> 50 </FormItem> 51 <FormItem> 52 <!-- 提交的单击事件 在下面的方法里面写好 --> 53 <Button type="primary" @click="handleSubmit('formValidate')">提交</Button> 54 <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> 55 </FormItem> 56 </Form> 57 </Modal> 58 <!-- 分页控件 --> 59 <div style="margin: 10px;overflow: hidden"> 60 <div style="float:left"> 61 <Page 62 :total="dataCount" 63 :page-size="pageSize" 64 show-total 65 :current="1" 66 @on-change="changepage" 67 ></Page> 68 </div> 69 </div> 70 </div> 71 </template> 72 <script> 73 import { Script } from "vm"; 74 let testData = { 75 histories: [ 76 { 77 name: "老王", 78 age: 18, 79 sex: "男", 80 address: "我喜欢吃苹果" 81 }, 82 { 83 name: "张三", 84 age: 18, 85 sex: "男", 86 address: "我喜欢吃炸鸡" 87 }, 88 { 89 name: "张欧", 90 age: 18, 91 sex: "男", 92 address: "我喜欢吃西瓜" 93 }, 94 { 95 name: "张五", 96 age: 18, 97 sex: "男", 98 address: "我喜欢吃阿弥光" 99 }, 100 { 101 name: "国基", 102 age: 18, 103 sex: "男", 104 address: "我喜欢吃烤鸭" 105 }, 106 { 107 name: "老王", 108 age: 18, 109 sex: "女", 110 address: "我喜欢吃苹果" 111 }, 112 { 113 name: "张三", 114 age: 18, 115 sex: "女", 116 address: "我喜欢吃炸鸡" 117 }, 118 { 119 name: "张欧", 120 age: 18, 121 sex: "女", 122 address: "我喜欢吃西瓜" 123 }, 124 { 125 name: "张五", 126 age: 18, 127 sex: "女", 128 address: "我喜欢吃阿弥光" 129 }, 130 { 131 name: "国基", 132 age: 18, 133 sex: "女", 134 address: "我喜欢吃烤鸭" 135 } 136 137 ] 138 }; 139 export default { 140 data() { 141 return { 142 // 这里需要设置原数据为空 143 // 好像跟实例化一样 不然会出错的 144 data1: [], 145 companyName: "", 146 // modal开始为false 147 handleModal: false, 148 149 // 这个对应form里面的数据不能少 名字不规范我就不改了 150 // columns1 和formvalidate 里面的命名要一样 别乱了 151 formValidate: { 152 name: "", 153 flight: "", 154 begin: "", 155 destination: "" 156 }, 157 // 分页 158 159 ajaxHistoryData: [], 160 // 初始化信息总条数 161 dataCount: 0, 162 // 每页显示多少条 163 pageSize: 5, 164 // 设置table的表头 165 columns1: [ 166 { 167 title: "姓名", 168 key: "name" 169 }, 170 { 171 title: "年龄", 172 key: "age" 173 }, 174 { 175 title: "爱好", 176 key: "address" 177 }, 178 { 179 title: "性别", 180 key: "sex" 181 }, 182 { 183 title: "操作", 184 slot: "action", 185 width: 200, 186 align: "center" 187 } 188 ], 189 // 设置表格的数据 190 tableData: [] 191 }; 192 }, 193 // 方法 194 methods: { 195 // 查找按钮 196 search() { 197 // 获取表格数据 198 var len = testData.histories; 199 // 设置一个空的数组 200 var arr = []; 201 // 循环遍历 202 for (var i in len) { 203 // if判断 如果文本框中的值等于表格中name的值 输出 204 if (len[i].name == this.companyName) { 205 arr.push(len[i]); 206 // 如果等于空就给他全部数据 207 } else if (this.companyName == "") { 208 this.data1 = testData.histories; 209 return; 210 } 211 } 212 // 将查找出来的数据给表格 213 this.data1 = arr; 214 }, 215 // 新增按钮的单击事件 216 addBus() { 217 this.handleModal = true; 218 this.modalTitle = "新增"; 219 }, 220 // 新增数据 221 handleSubmit(name) { 222 var self = this; 223 self.$refs[name].validate(valid => { 224 if (valid) { 225 var params = JSON.parse(JSON.stringify(self.formValidate)); 226 227 if (self.modalTitle == "新增") { 228 // 获取需要渲染到页面中的数据 229 self.$Message.success("新增成功!"); 230 self.data1.push(params); 231 } else { 232 this.$set(self.data1, self.itemIndex, params); 233 self.$Message.success("修改成功!"); 234 } 235 self.handleModal = false; 236 } else { 237 if (self.modalTitle == "新增") { 238 self.$Message.error("新增失败!"); 239 } else { 240 self.$Message.error("修改失败!"); 241 } 242 } 243 }); 244 }, 245 // 修改方法 246 editBus(item, index) { 247 this.handleModal = true; 248 this.modalTitle = "修改"; 249 this.itemIndex = index; 250 this.formValidate = JSON.parse(JSON.stringify(item)); 251 }, 252 // 删除一条数据 253 remove(index) { 254 this.data1.splice(index, 1); 255 // on-click 方法 冒泡提示确定 256 this.$Message.success("删除成功"); 257 }, 258 cancel1() { 259 this.$Message.info("取消删除"); 260 }, 261 // 清除文本框 重置 262 handleReset(name) { 263 this.$refs[name].resetFields(); 264 }, 265 // 详情显示 266 show(index) { 267 this.$Modal.info({ 268 title: "查看详情", 269 content: `姓名:${this.data1[index].name}<br>年龄:${this.data1[index].age} 270 <br>爱好:${this.data1[index].address}<br>性别:${this.data1[index].sex} 271 ` 272 }); 273 }, 274 // 分页 275 handleListApproveHistory() { 276 // 保存取到的所有数据 277 278 this.ajaxHistoryData = testData.histories; 279 this.dataCount = testData.histories.length; 280 // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示 281 if (testData.histories.length < this.pageSize) { 282 this.data1 = this.ajaxHistoryData; 283 } else { 284 this.data1 = this.ajaxHistoryData.slice(0, this.pageSize); 285 } 286 }, 287 changepage(index) { 288 this.page = index; 289 var _start = (index - 1) * this.pageSize; 290 var _end = index * this.pageSize; 291 this.data1 = this.ajaxHistoryData.slice(_start, _end); 292 } 293 294 }, 295 296 // 这个应该是加载事件 加载页面的时候就调用 297 // mounted() { 298 // // 页面一加载就将数据给出给表格 299 // this.data1 = testData.histories; 300 // }, 301 created() { 302 this.handleListApproveHistory(); 303 } 304 305 306 }; 307 </script> 308 309 <style> 310 </style>