iview ui 全静态表格，增删改查，分页功能

本demo是一个非常全的，后台管理系统类的表单：增、删、改、查。4个主要功能都齐全的demo，数据采用的本地变量数组加载时调用；非常适用于纯前端页面的渲染；欢迎大家done下学习，以及提问题；（非常适用于刚刚入手iview ui 库的小伙伴们）

先上几张效果图：

1.列表图：

2.查询列表：

 

 3.点击详情报错：

iview按需引用后使用this.$Modal报错

通过直接调用以下方法来使用：

• this.$Modal.info(config)

去你的main.js 里面查一下你的   mode引入进来了吗？ 

 

这上面三句代码，看看你有没有；

import { Modal } from 'iview'

Vue.component('Modal', Modal)
Vue.prototype.$Modal = Modal

4.正确显示的详情页面：

5.编辑页面：

6.新增页面：

7.删除页面：

全部code如下：

 欢迎done下学习交流；

<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 border :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="680"
      @on-visible-change="handleReset('formValidate')"
    >
      <Form inline ref="formValidate" :model="formValidate" :label-width="100" :rules="ruleValidate">
        <row :gutter="24">
          <Col span="12">
            <FormItem label="姓名" prop="name">
              <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
            </FormItem>
            <FormItem label="年龄" prop="age">
              <Input v-model="formValidate.age" placeholder="请输入年龄"></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="地址" prop="address">
              <Input v-model="formValidate.address" placeholder="请输入你的爱好"></Input>
            </FormItem>
            <FormItem label="性别" prop="sex">
              <Input v-model="formValidate.sex" placeholder="别不男不女"></Input>
            </FormItem>
          </Col>
        </row>
        <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 Cookies from 'js-cookie';
const 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,
      //规则
      ruleValidate: {
        name: [{ required: true, message: "姓名不能为空！", trigger: "blur" }],
        age: [{ required: true, message: "年龄不能为空！", trigger: "blur" }],
        address: [
          { required: true, message: "地址不能为空！", trigger: "blur" }
        ],
        sex: [{ required: true, message: "性别不能为空！", trigger: "blur" }]
      },
      //  这个对应form里面的数据不能少  名字不规范我就不改了
      // columns1 和formvalidate 里面的命名要一样 别乱了
      formValidate: {
        name: "",
        flight: "",
        begin: "",
        destination: ""
      },
      // 分页
      ajaxHistoryData: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 5,
      // 设置table的表头
      columns1: [
        {
          title: "序号",
          type: "index",
          width: 70
        },
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "年龄",
          key: "age"
        },
        {
          title: "爱好",
          key: "address"
        },
        {
          title: "性别",
          key: "sex"
        },
        {
          title: "操作",
          slot: "action",
          width: 200,
          align: "center"
        }
      ],
      // 设置表格的数据
      tableData: []
    };
  },
  // 方法
  methods: {
    ok() {},
    cancel() {},
    // 查找按钮
    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();
  },
  mounted() {}
};
</script>

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140