Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查页面展示效果一、页面结构分为三个部分 head body 以及script一般我个人是在head中引入一些组件库 , 还有一些样式 ; style 也可以定义在其中, 通过id选择器 ,还有类选择器进行 定义script 标签体中引入的是一些常见的组件库LIink 标签体中引入的是一些CSS样式body中一般是书写页面的结构 , 也就是定
·
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=true
this.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="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=true
this.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.
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
9
0- 0
已为社区贡献4条内容
所有评论(0)