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

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
#### 总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。



万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。



为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

![](htt

**真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲**
**详情关注公中号【编程进阶路】**

ps://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)



![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)



**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)