Vue+ElementUI纯前端技术实现对表格数据的增删改查

页面展示效果

一、页面结构

分为三个部分 head body 以及script

一般我个人是在head中引入一些组件库 , 还有一些样式 ; style 也可以定义在其中, 通过id选择器 ,还有类选择器进行定义

script 标签体中引入的是一些常见的组件库

LIink 标签体中引入的是一些CSS样式

body中一般是书写页面的结构 , 也就是定义一个DIV , 然后在其中书写书写页面中的各种元素

最后就是script 这里首先通过ID选中DIV , new Vue({ }); 通过el 选中id , data 中书写需要的数据 , methods 里面书写函数方法 , 也就是各种事件

下面是一些简单的html结构 :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--这是引入的组件库--><script src="js/vue.js"></script><!--这是引入的样式--><link rel="stylesheet" href="fonts/element-icons.ttf"></head>
<body><!--这里一般书写页面的结构-->
<div id="app"><h1>我是首页中的标题</h1><button @click="dianji">点点我</button>
</div>
</body><script>new Vue({el:"#app",data:{},methods:{dianji:function (index) {alert('如果不是为了装逼 ,那么一切将毫无意义!');}}});
</script>
</html>

二、涉及到的技术知识

1、页面布局

<div id="one" align="center">              </div>

2、导航菜单

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" align="center">//这是子菜单选项
<el-menu-item index="1"><font color="#000000">首页</font></el-menu-item>
</el-menu>

3、表单

<el-form align="center">    </el-form>

4、Button按钮

<el-button type="primary" @click.native.prevent="update" :loading="addLoading">确定</el-button>

5、Pagination分页

<el-pagination layout="prev,pager,next" :total="50">                  </el-pagination>

6、弹框

<el-dialog title="编辑" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" append-to-body="true"></el-dialog>

7、V-model 展示数据

  <el-input v-model="form.id" autocomplete="off"></el-input>

8、表格中展示数据

table 中展示的数组中的整体数据用的是:data

column展示的每一个集合中某一点属性用的是prop

<el-table :data="newsList" style="width:100%"  align="center"><el-table-column prop="id" label="公司代号" width="180"></el-table-column>
</el-table>

9、最难点

按钮的功能是最难实现的部分 , 就是一些事件执行的函数功能 , 也就是一些算法 ;
这一部分在第五大项集中进行讲解

三、如何去书写一个页面结构

首先 , 最外层肯定是一个DIV , 然后DIV中去书写一个el -form , 然后用el-row去分很多行 , 每一行中去书写自己需要的内容 ,可以是图片 , 也可以是按钮 , 也可以是一段文字 ,然后呢书写结构以后 ,样式事件 , 都是在标签体中去进行定义 ;

四、易错点

1、首先必须引入组件库 , 以及常用的样式

你创建一个文件夹 ,然后把这些后缀名为js css的文件给导入进去

2、你的html页面必须直接创建在根目录文件下 ,不要自己手动创建一个文件夹 ,然后在里面进行书写 ,不然你的组建组不起作用

3、弹框也是非常的费劲

五、难点

最难的点永远都是算法的知识 , 这一部分知识你会就是会 ,不会给你再多时间也没用 , 就是增加、删除、修改、查询几个按钮功能的实现

1、弹框部分

1.1 这一段是就是 ,就是你执行按钮操作之前出现的提示信息 , 就是相当于询问你是否确定这样做

记住关键字this.$confirm就行,格式自己复制粘贴就行

this.$confirm('确认进行添加','是否继续?','提示',{confirmButtonText:'确定',confirmButtonText:'取消',
}

1.2 下面这一段是操作完成之后的提示信息 ; 提示你是执行成功了还是没有

记住关键字this.$message就行 ,格式自己复制粘贴就行

this.$message({type: 'success',message:'添加成功',
})

1.3 这是编辑的弹框部分

<el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%" :before-close="handleClose" append-to-body="true"><!--这就是一个表格--><el-form :model="form" ><!--公司ID--><el-form-item label="公司ID"><el-input v-model="form.id" autocomplete="off"></el-input></el-form-item><!--公司名称--><el-form-item label="公司名称"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><!--公司地址--><el-form-item label="公司地址"><el-input v-model="form.adress" autocomplete="off"></el-input></el-form-item></el-form><!--确定, 取消  按钮--><div><el-button type="primary" @click.native.prevent="editSubForm" :loading="addLoading">确定</el-button><el-button @click.native.prevent="dialogFormVisible=false">取消</el-button></div>
</el-dialog>

2、方法执行流程

adddetail:function(){最开始执行的部分 ,一般书写this.$confirm以及你要执行的函数功能!}).then(()=>{接下来执行的部分一般书写的this.$message也就是执行是否成功的提示信息!})}).catch((err)=>{这是出错时候需要执行的部分一般也是取消执行出现的弹窗信息   })})},

3、增加数据的实现过程解读

这段代表向newList这个数组中添加元素

newList是我们写死的数据 , addDetail是我们定义的一个空数组 , 然后输入的ID对应于ID ,其余同理 , 添加到写死的数组中, 这样数据就展示出来了 ;

this.newsList.push({id:this.addDetail.id,name:this.addDetail.name,adress:this.addDetail.adress,
}),

4、删除数据的实现过程解读

只用一行就代码就实现了删除 this.newsList.splice(index,1)

index代表的是当前位置所处的索引 , 1 代表删除一条数据 ,合起来也就是删除一条数据

splice是js中删除数组中元素的方法 ;

this.newsList.splice(index,1)
this.$message({type: 'success',message:'删除成功',
})

5、编辑数据的实现过程解读

首先当你点击编辑按钮的时候 , 会弹出一个弹框 , 获取的是当前你点击按钮的那行数据并进行展示 , 你可以对他进行修改 , 然后点击保存数据数据就会发生改变

所以我们必须先进行一个绑定一个点击事件 , 当你点击编辑按钮的时候弹框就出现

这里边有一个属性 :visible.sync=“dialogFormVisible” 我们对其进行赋值为false 意思是平常不显示 ,

当触发修改的点击事件的石头 , 我们就将这个变量变为true 意思是显示出来

<el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%" :before-close="handleClose" append-to-body="true">

修改的方法

首先我们根据索引 , 获取当前的这条数据 ,

this.form=JSON.parse(JSON.stringify(this.newsList))[index];可以理解为用来拷贝数据的editdetail:function (index,rows) {this.dialogFormVisible=truethis.selected=index;this.form=JSON.parse(JSON.stringify(this.newsList))[index];},

保存修改的方法

Vue.set(this.newsList,this.selected,this.form); 这个是用来赋值用的this.getShowData(this.newsList); 这个是我们书写的一个展示数据的方法this.dialogFormVisible=false; 再次让弹窗进行隐藏editSubForm:function(){Vue.set(this.newsList,this.selected,this.form);this.getShowData(this.newsList);this.dialogFormVisible=false;
},

展示数据的方法

/*获取需要渲染到页面中的数据*/
getShowData:function (arr) {this.clonenewsList=JSON.parse(JSON.stringify(arr));
},

6、查询数据的解读过程

查询完成以后展示数据即可

对需要进行查询的数据书写一个自己自定义的查询条件

searchFn:function (e) {var key=e.target.value;/*查询公司ID*/
if(key){var serchArray=[];this.newsList.forEach(function (item) {if(item.id.indexOf(key)>-1){serchArray.push(item);}/*name查询*/if(item.name.indexOf(key)>-1){serchArray.push(item);}/*地址查询*/if(item.adress.indexOf(key)>-1){serchArray.push(item);}});this.getShowData1(serchArray);
}else{this.getShowData1(this.newsList);
}
}

六、完整页面代码

①首页部分

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>帝国企业管理系统</title><!--引用的一些样式--><link rel="stylesheet" href="js/reset.css" type="text/css"/><link rel="stylesheet" href="css/elementUi.css" type="text/css"/><link rel="stylesheet" href="css/styles.css"><link rel="stylesheet" href="css/base.css" type="text/css"/><link rel="stylesheet" href="css/main.css" type="text/css"/><!--引入的字体样式--><link rel="stylesheet" href="fonts/element-icons.woff"><link rel="stylesheet" href="fonts/element-icons.ttf"><link rel="stylesheet" href="fonts/ionicons.svg"><link rel="stylesheet" href="fonts/ionicons.ttf"><link rel="stylesheet" href="fonts/ionicons.woff"><!--引用的vue 和elementui组建库--><script src="js/vue.js"></script><script src="js/elementUi.js"></script></head>
<body><div id="one"><!--第一行数据--><el-form align="center"><font size="50px" color="#8b0000"> 张氏帝国企业管理系统首页</font><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" align="center"><el-menu-item index="1"><font color="#000000">首页</font></el-menu-item><el-submenu index="2"><template slot="title"><font color="#000000">企业管理</font></template><el-menu-item index="2-1"><el-link type="success"><a href="https://alibaba.com" color="yellow">人才培养</a></el-link></el-menu-item><el-menu-item index="2-2"><el-link><a href="https://baidu.com" color="blue">企业文化</a></el-link></el-menu-item><el-menu-item index="2-3"><el-link><a href="List_form.html" color="blue">企业查看</a></el-link></el-menu-item></el-submenu><el-menu-item index="4"><font color="#000000">打卡管理</font></el-menu-item><el-menu-item index="4"><font color="#000000">求职</font></el-menu-item><el-menu-item index="4"><font color="#000000">学习</font></el-menu-item><el-menu-item index="4"><font color="#000000">讨论区</font></el-menu-item><el-menu-item index="4"><font color="#000000">发现</font></el-menu-item><el-menu-item index="4"><font color="#000000">试题</font></el-menu-item><el-menu-item index="4"><font color="#000000">搜索</font></el-menu-item><el-menu-item index="4"><font color="#000000">地图</font></el-menu-item><el-menu-item index="4"><font color="#000000">文库</font></el-menu-item><el-menu-item index="4"><font color="#000000">帮助</font></el-menu-item></el-menu><img src="data:images/bg_jsh.png" id="bg"></el-form><br></div>
</body><script>new Vue({el:"#one",})
</script></html>

②企业查看详情部分

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>ICBC详情页</title><!--引用的一些样式--><link rel="stylesheet" href="js/reset.css" type="text/css"/><link rel="stylesheet" href="css/elementUi.css" type="text/css"/><link rel="stylesheet" href="css/styles.css"><link rel="stylesheet" href="css/base.css" type="text/css"/><link rel="stylesheet" href="css/main.css" type="text/css"/><link rel="stylesheet" href="css/bootstrap.min.css"><!--引用的vue 和elementui组建库--><script src="js/vue.js"></script><script src="js/elementUi.js"></script><script src="js/jquery.min.js"></script><!--这是样式--><style>#tianjia{}.title{padding:10px;border-bottom: 1px solid #00ffff;}.mask{width:300px;height:250px;background: rgba(255,255,255,1);position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;z-index:47;border-radius: 5px;}#mask{background:rgba(0,0,0,.5);width:100%;height:100%;position:fixed;z-index:4;top:0;left:0;}</style></head>
<body><div id="one" align="center"><el-form align="center"><!--第一行  标题--><el-row><font size="50px" color="#8b0000">张氏帝国企业管理系统详情页</font></el-row><!--这是新增的查询功能--><input type="text" placeholder="请输入要查询的条件" style="width:45%" v-model="search" v-on:input="searchFn"><!--第二行  添加按钮  --><div id="tianjia"><input type="text"  name="id"  v-model="addDetail.id"  value="" placeholder="请输入公司代号" style="width: 13%;"><input type="text"  name="name" v-model="addDetail.name" value="" placeholder="请输入公司名称" style="width: 13%;"><input type="text"  name="adress" v-model="addDetail.adress" value="" placeholder="请输入公司地址" style="width: 13%;"><el-button type="success" size="big" round="true"  @click.native.prevent="adddetail()"><font color="#f0f8ff" size="2px">添加</font></el-button></div><!--第三行   展示数据区域--><el-form ><el-table :data="newsList" style="width:100%"  align="center"><el-table-column prop="id" label="公司代号" width="180"></el-table-column><el-table-column prop="name" label="公司名称" width="180"></el-table-column><el-table-column prop="adress" label="公司地址" width="180"></el-table-column><!--增加 操作 菜单 以及旗下的子菜单 增加 修改--><el-table-column  label="操作" width="150"><template slot-scope="scope"><!--修改按钮--><el-button @click.native.prevent="editdetail(scope.$index,newsList)"  type="info" size="small">修改</el-button><!--删除按钮--><el-button @click.native.prevent="deletedetail(scope.$index,newsList)" type="danger" size="small">删除</el-button></template></el-table-column></el-table></el-form><!--编辑弹框部分--><div><el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%" :before-close="handleClose" append-to-body="true"><!--这就是一个表格--><el-form :model="form" ><!--公司ID--><el-form-item label="公司ID"><el-input v-model="form.id" autocomplete="off"></el-input></el-form-item><!--公司名称--><el-form-item label="公司名称"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><!--公司地址--><el-form-item label="公司地址"><el-input v-model="form.adress" autocomplete="off"></el-input></el-form-item></el-form><!--确定, 取消  按钮--><div><el-button type="primary" @click.native.prevent="editSubForm" :loading="addLoading">确定</el-button><el-button @click.native.prevent="dialogFormVisible=false">取消</el-button></div></el-dialog></div><!--分页部分--><div class="block"><span class="demostration"></span><el-pagination @size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[10,20,30,40]":page-size="100"layout="total,sizes,prev,pager,next,jumper":total="100"></el-pagination></div></el-form>
</div></body><script>var _index;new Vue({el:"#one",/*定义的数据*/data:{clonenewsList:[],checked:true,tableform:[],formLabeWidth:'120px',dialogFormVisible:false,editForm:[],selectList:{},search:"",currentPage:1,addDetail:{},editList:false,editDetail:{},radio:1,form:{id:"",name:"",adress:""},/*表格中写死的数据*/newsList:[{id:"001",name:"阿里巴巴",adress:"杭州湖畔花园",},{id:"002",name:"工银科技",adress:"北京朝阳区天源祥泰大厦"},{id:"003",name:"IBM",adress:"海淀区中关村软件园"},{id:"004",name:"华为",adress:"北京海淀区北研所"},{id:"005",name:"网龙",adress:"福州长乐湖"},{id:"006",name:"BOSS直聘",adress:"北京朝阳区太阳宫"},{id:"007",name:"滴滴",adress:"北京海淀区上地"},{id:"008",name:"中国软件",adress:"北京海淀区北下关"},{id:"009",name:"小米",adress:"北京海淀区清河"},{id:"010",name:"跟谁学",adress:"北京海淀区中关村"},{id:"011",name:"美团",adress:"北京海淀区中关村"},{id:"012",name:"今日头条",adress:"北京海淀区清河"},]/*写死的数据结束*/},methods:{/*添加方法*/adddetail:function(){this.$confirm('确认进行添加','是否继续?','提示',{confirmButtonText:'确定',confirmButtonText:'取消',}).then(()=>{this.newsList.push({id:this.addDetail.id,name:this.addDetail.name,adress:this.addDetail.adress,}),/*成功添加之后的提示信息*/this.$message({type: 'success',message:'添加成功',})}).catch((err)=>{this.$message({type:'error',message:err})})},/*删除方法*/deletedetail:function (index, rows) {this.$confirm('此操作将删除数据,','是否继续?','提示',{confirmButtonText:'确定',confirmButtonText:'取消',type:'warning'}).then(()=>{this.newsList.splice(index,1)this.$message({type: 'success',message:'删除成功',})}).catch((err) =>{this.$message({type:'error',message:err})})},/*修改方法*/editdetail:function (index,rows) {this.dialogFormVisible=truethis.selected=index;this.form=JSON.parse(JSON.stringify(this.newsList))[index];},/*提交修改*/editSubForm:function(){Vue.set(this.newsList,this.selected,this.form);this.getShowData(this.newsList);this.dialogFormVisible=false;},/*查询方法*/searchFn:function (e) {var key=e.target.value;/*查询公司ID*/if(key){var serchArray=[];this.newsList.forEach(function (item) {if(item.id.indexOf(key)>-1){serchArray.push(item);}/*name查询*/if(item.name.indexOf(key)>-1){serchArray.push(item);}/*地址查询*/if(item.adress.indexOf(key)>-1){serchArray.push(item);}});this.getShowData1(serchArray);}else{this.getShowData1(this.newsList);}},/*获取需要渲染到页面中的数据*/getShowData:function (arr) {this.clonenewsList=JSON.parse(JSON.stringify(arr));},/*专门为查询写的渲染数据*/getShowData1:function (arr) {this.newsList=JSON.parse(JSON.stringify(arr));},/*分页功能代码*/handleSizeChange(val){console.log(`每页${val}条`);},handleCurrentChange(val){console.log(`当前页:$(val)`);},}})
</script></html>

代码所缺JS文件以及图片都可以到我的github中去下载
https://github.com/zhagnshuai19951021/My-Project.git.