本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" --><Poptipstyle="text-align:left"confirmtitle="您确定要删除该信息?"placement="left-end"@on-ok="remove(index)"@on-cancel="cancel1"><Button type="error" size="small">删除</Button><!-- @click="remove(index)" --></Poptip></template></Table><Modalv-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开始为falsehandleModal: 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

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

复习JavaWeb的小项目书籍信息的增删改查分页功能实现Java面试题Session和Cookie的基础概念生活【记录一个咸鱼大学生三个月的奋进生活】034
记录一个咸鱼大学生三个月的奋进生活034 JavaWeb的增删改查分页功能实现前期准备工作(数据库连接类和实体类) 数据库建立数据库连接类(DBManager) 书籍信息的实体类(Book) 操作 ...
增删改查 HTML表格页面,表格增删改查.html
表格增删改查 body{ background:#dddddd; text-align:center; } .list { display: inline-block; margin-top: 20p ...
MySQL数据库基础表格——增删改查（下）
♥️作者:小刘在C站 ♥️个人主页:小刘主页 ♥️每天分享云计算网络运维课堂笔记,努力不一定有收获,但一定会有收获加油!一起努力,共赴美好人生! ♥️树高千尺,落叶归根人生不易,人间真情目录 MyS ...
纯JS+HTML+CSS实现表格增删改查翻页--模板文件管理
纯JS+HTML+CSS实现表格增删改查翻页--模板文件管理效果页面增删改翻页页面显示条数查找跳页代码结语效果话不多说,直接看效果,本次代码较为复杂,希望大家可以耐心阅读,不 ...
如何在30分钟完成表格增删改查的前后端框架搭建
30分钟,你可以做什么? 可以风卷残云的饱餐一顿:可以简单地打扫一下房间:或者可以跳10十遍刘畊宏<本草纲目>毽子操. 而今天,本葡萄要带你在30分钟内完成一套拥有增删改查表格系统的前后端 ...
html增删改后让table自动刷新,vue如何实现表格增删改查效果
vue如何实现表格增删改查效果发布时间:2021-04-23 14:34:54 来源:亿速云阅读:90 作者:小新小编给大家分享一下vue如何实现表格增删改查效果,相信大部分人都还不怎么了解,因 ...
servlet增删改查实例_SpringMVC4+MyBatis3+SQLServer 2014 整合（包括增删改查分页）
前言说起整合自然离不开ssm,我本身并不太喜欢ORM,尤其是MyBatis,把SQL语句写在xml里,尤其是大SQL,可读性不高,出错也不容易排查. 开发环境 idea2016.SpringMVC4 ...
java ssm框架做增删改查,使用SSM框架组合实现增删改查的功能
基于ssm框架组合的增删改查功能 ssm框架组合之前已经搭建完成了,下面基于该框架组合实现增删改查的功能,首先创建一个数据库和一张表: CREATE DATABASE `ssmteam` /*!401 ...
springboot+mybatisplus+postgis实现几何点和线串增删改查分页
postgis类型介绍对象分类描述 POINT 点 MULTIPOINT 多点 LINESTRING 线 LINEARRING 线环 MULTILINESTRING 点串 POLYGON 面 MU ...

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

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

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

最新文章

热门文章