iviewUI 前端静态页面实现增删改查分页

完整代码部分 (仅供参考哈)：

 <template>
   <div>
     <label prop="name">&nbsp;姓名：&nbsp;</label>
     <Input v-model="companyName" id="pp" style="width: 120px" placeholder="请输入" />&nbsp;&nbsp;
     <Button @click="search" type="primary" icon="ios-search">查询</Button>&nbsp;&nbsp;
     <Button type="primary" @click="addBus" icon="ios-add-circle-outline">新增</Button>
     <Table :columns="columns1" :data="data1" size="small" ref="table">
       <template slot-scope="{ row }" slot="name">
         <strong>{{ row.name }}</strong>
       </template>
       <template slot-scope="{ row, index }" slot="action">
         <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button>
         <Button type="warning" style="margin-right: 5px" size="small" @click="editBus(row,index)">编辑</Button>
         <!-- 前面的小图标会居中挡住文字  设置一下样式就好了 style="text-align:left" -->
         <Poptip
           style="text-align:left"
           confirm
           title="您确定要删除该信息?"
           placement="left-end"
           @on-ok="remove(index)"
           @on-cancel="cancel1"
         >
           <Button type="error" size="small">删除</Button>
           <!-- @click="remove(index)" -->
         </Poptip>
       </template>
     </Table>
     <Modal
       v-model="handleModal"
       title="新增一条数据"
       @on-ok="ok"
       @on-cancel="cancel"
       :footer-hide="true"
       :mask-closable="false"
       width=""
       @on-visible-change="handleReset('formValidate')"
     >
       <Form inline ref="formValidate" :model="formValidate" :label-width="" :rules="ruleValidate">
         <FormItem label="姓名" prop="name">
           <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
         </FormItem>
         <FormItem label="年龄" prop="age">
           <Input v-model="formValidate.age" placeholder="请输入年龄"></Input>
         </FormItem>
         <FormItem label="爱好" prop="address">
           <Input v-model="formValidate.address" placeholder="请输入你的爱好"></Input>
         </FormItem>
         <FormItem label="性别" prop="sex">
           <Input v-model="formValidate.sex" placeholder="别不男不女"></Input>
         </FormItem>
         <FormItem>
           <!-- 提交的单击事件  在下面的方法里面写好 -->
           <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>&nbsp;&nbsp; &nbsp;
           <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
         </FormItem>
       </Form>
     </Modal>
      <!-- 分页控件 -->
         <div style="margin: 10px;overflow: hidden">
           <div style="float:left">
             <Page
               :total="dataCount"
               :page-size="pageSize"
               show-total
               :current=""
               @on-change="changepage"
             ></Page>
           </div>
         </div>
   </div>
 </template>
 <script>
 import { Script } from "vm";
 let testData = {
   histories: [
       {
           name: "老王",
           age: ,
           sex: "男",
           address: "我喜欢吃苹果"
         },
         {
           name: "张三",
           age: ,
           sex: "男",
           address: "我喜欢吃炸鸡"
         },
         {
           name: "张欧",
           age: ,
           sex: "男",
           address: "我喜欢吃西瓜"
         },
         {
           name: "张五",
           age: ,
           sex: "男",
           address: "我喜欢吃阿弥光"
         },
         {
           name: "国基",
           age: ,
           sex: "男",
           address: "我喜欢吃烤鸭"
         },
         {
           name: "老王",
           age: ,
           sex: "女",
           address: "我喜欢吃苹果"
         },
         {
           name: "张三",
           age: ,
           sex: "女",
           address: "我喜欢吃炸鸡"
         },
         {
           name: "张欧",
           age: ,
           sex: "女",
           address: "我喜欢吃西瓜"
         },
         {
           name: "张五",
           age: ,
           sex: "女",
           address: "我喜欢吃阿弥光"
         },
         {
           name: "国基",
           age: ,
           sex: "女",
           address: "我喜欢吃烤鸭"
         }

   ]
 };
 export default {
   data() {
     return {
       // 这里需要设置原数据为空
       // 好像跟实例化一样  不然会出错的
       data1: [],
       companyName: "",
       // modal开始为false
       handleModal: false,

       //  这个对应form里面的数据不能少  名字不规范我就不改了
       // columns1 和formvalidate 里面的命名要一样 别乱了
       formValidate: {
         name: "",
         flight: "",
         begin: "",
         destination: ""
       },
        // 分页

      ajaxHistoryData: [],
       // 初始化信息总条数
       dataCount: ,
       // 每页显示多少条
       pageSize: ,
       // 设置table的表头
       columns1: [
         {
           title: "姓名",
           key: "name"
         },
         {
           title: "年龄",
           key: "age"
         },
         {
           title: "爱好",
           key: "address"
         },
         {
           title: "性别",
           key: "sex"
         },
         {
           title: "操作",
           slot: "action",
           width: ,
           align: "center"
         }
       ],
       // 设置表格的数据
       tableData: []
     };
   },
   // 方法
   methods: {
     // 查找按钮
     search() {
       // 获取表格数据
       var len = testData.histories;
       // 设置一个空的数组
       var arr = [];
       // 循环遍历
       for (var i in len) {
         // if判断  如果文本框中的值等于表格中name的值 输出
         if (len[i].name == this.companyName) {
           arr.push(len[i]);
           // 如果等于空就给他全部数据
         } else if (this.companyName == "") {
           this.data1 = testData.histories;
           return;
         }
       }
       // 将查找出来的数据给表格
       this.data1 = arr;
     },
     // 新增按钮的单击事件
     addBus() {
       this.handleModal = true;
       this.modalTitle = "新增";
     },
     // 新增数据
     handleSubmit(name) {
       var self = this;
       self.$refs[name].validate(valid => {
         if (valid) {
           var params = JSON.parse(JSON.stringify(self.formValidate));

           if (self.modalTitle == "新增") {
             // 获取需要渲染到页面中的数据
             self.$Message.success("新增成功!");
             self.data1.push(params);
           } else {
             this.$set(self.data1, self.itemIndex, params);
             self.$Message.success("修改成功!");
           }
           self.handleModal = false;
         } else {
           if (self.modalTitle == "新增") {
             self.$Message.error("新增失败!");
           } else {
             self.$Message.error("修改失败!");
           }
         }
       });
     },
     // 修改方法
     editBus(item, index) {
       this.handleModal = true;
       this.modalTitle = "修改";
       this.itemIndex = index;
       this.formValidate = JSON.parse(JSON.stringify(item));
     },
     // 删除一条数据
     remove(index) {
       this.data1.splice(index, );
       // on-click  方法 冒泡提示确定
       this.$Message.success("删除成功");
     },
      cancel1() {
       this.$Message.info("取消删除");
     },
     // 清除文本框  重置
     handleReset(name) {
       this.$refs[name].resetFields();
     },
     // 详情显示
      show(index) {
       this.$Modal.info({
         title: "查看详情",
         content: `姓名:${this.data1[index].name}<br>年龄:${this.data1[index].age}
         <br>爱好:${this.data1[index].address}<br>性别:${this.data1[index].sex}
         `
       });
     },
      // 分页
     handleListApproveHistory() {
       // 保存取到的所有数据

       this.ajaxHistoryData = testData.histories;
       this.dataCount = testData.histories.length;
       // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
       if (testData.histories.length < this.pageSize) {
         this.data1 = this.ajaxHistoryData;
       } else {
         this.data1 = this.ajaxHistoryData.slice(, this.pageSize);
       }
     },
     changepage(index) {
       this.page = index;
       var _start = (index - ) * this.pageSize;
       var _end = index * this.pageSize;
       this.data1 = this.ajaxHistoryData.slice(_start, _end);
     }

   },

   // 这个应该是加载事件  加载页面的时候就调用
   // mounted() {
   //   // 页面一加载就将数据给出给表格
   //   this.data1 = testData.histories;
   // },
   created() {
     this.handleListApproveHistory();
   }

 };
 </script>

 <style>
 </style>