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="820"
      @on-visible-change="handleReset('formValidate')"
    >
      <Form inline ref="formValidate" :model="formValidate" :label-width="80" :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="1"
              @on-change="changepage"
            ></Page>
          </div>
        </div>
  </div>
</template>
<script>
import { Script } from "vm";
let testData = {
  histories: [
      {
          name: "老王",
          age: 18,
          sex: "男",
          address: "我喜歡吃蘋果"
        },
        {
          name: "張三",
          age: 18,
          sex: "男",
          address: "我喜歡吃炸雞"
        },
        {
          name: "張歐",
          age: 18,
          sex: "男",
          address: "我喜歡吃西瓜"
        },
        {
          name: "張五",
          age: 18,
          sex: "男",
          address: "我喜歡吃阿彌光"
        },
        {
          name: "國基",
          age: 18,
          sex: "男",
          address: "我喜歡吃烤鴨"
        },
        {
          name: "老王",
          age: 18,
          sex: "女",
          address: "我喜歡吃蘋果"
        },
        {
          name: "張三",
          age: 18,
          sex: "女",
          address: "我喜歡吃炸雞"
        },
        {
          name: "張歐",
          age: 18,
          sex: "女",
          address: "我喜歡吃西瓜"
        },
        {
          name: "張五",
          age: 18,
          sex: "女",
          address: "我喜歡吃阿彌光"
        },
        {
          name: "國基",
          age: 18,
          sex: "女",
          address: "我喜歡吃烤鴨"
        }
    
  ]
};
export default {
  data() {
    return {
      // 這里需要設置原數據為空
      // 好像跟實例化一樣  不然會出錯的
      data1: [],
      companyName: "",
      // modal開始為false
      handleModal: false,

      //  這個對應form里面的數據不能少  名字不規范我就不改了
      // columns1 和formvalidate 里面的命名要一樣 別亂了
      formValidate: {
        name: "",
        flight: "",
        begin: "",
        destination: ""
      },
       // 分頁

     ajaxHistoryData: [],
      // 初始化信息總條數
      dataCount: 0,
      // 每頁顯示多少條
      pageSize: 5,
      // 設置table的表頭
      columns1: [
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "年齡",
          key: "age"
        },
        {
          title: "愛好",
          key: "address"
        },
        {
          title: "性別",
          key: "sex"
        },
        {
          title: "操作",
          slot: "action",
          width: 200,
          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, 1);
      // 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(0, this.pageSize);
      }
    },
    changepage(index) {
      this.page = index;
      var _start = (index - 1) * 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>