前言

记录自己做的一个纯前端的用户管理页面，用V-cli创建，引入elment-ui，实现增删改查功能

一、使用v-cli创建vue项目文件

下载node.js，为了里面的npm指令
npm install -g @vue/cli下载v-cli
vue --version验证是否成功
vue create vue_first创建项目，其中vue_first为项目也就是在电脑上文件夹的名字，可以自定义
然后进行配置，跟着教程走，最后附赠两条指令，点进去是hellovue的页面。

二、引入element-ui

npm i element-ui -S安装element **注：这是element官网的指令，后面可能会有版本问题，部分组件显示不了
在刚才创建的项目文件中找到main.js，加入如下三行代码引入element

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

三、开始实现功能

1.初步页面，表格绘制

 在element中找到Table组件，选一个适合的copy，代码如下

  <el-table:data="tableData">//第一列工号<el-table-columnprop="num"label="工号"fixed></el-table-column>//第二列用户名<el-table-columnprop="userName"label="用户名"fixed></el-table-column>//第三列姓名<el-table-columnprop="name"label="姓名"fixed></el-table-column>//第四列操作<el-table-columnalign="center"label="操作"><template slot-scope="scope"><el-button-group aligin:right><el-button @click="edit(scope.$index,scope.row)">编辑</el-button><el-button @click="deletee(scope.$index)">删除</el-button></el-button-group></template></el-table-column>  </el-table>

后台写死的数据如下

tableData: [{num: 1,userName: 'zhangsan',name: '张三'}, {num: 2,userName: 'lisi',name: '李四'}, {num: 3,userName: 'wangwu',name: '王五'}, {num: 4,userName: 'zhaoliu',name: '赵六'}]

效果如下

2.实现增加功能

在表格上面写三个input用于输入工号、用户名、姓名的数据，加一个button按钮进行添加操作。对三个输入框进行v-model双向绑定操作，获取输入的值然后，添加到数组中
各自代码如下
html:

   <el-inputstyle="width:20%"placeholder="请输入工号"v-model="tableDataInfo.num"clearable></el-input>    <el-inputstyle="width:20%"placeholder="请输入用户名"v-model="tableDataInfo.userName"></el-input>    <el-inputstyle="width:20%"placeholder="请输入姓名"v-model="tableDataInfo.name"></el-input> <el-buttontype="primary"@click="add">增加</el-button>

js：
data中加一个tableDataInfo用来分别存储输入值

 tableDataInfo:{num:'',userName:'',name:''}

 add:function(){var data ={num:this.tableDataInfo.num,userName:this.tableDataInfo.userName,name:this.tableDataInfo.name}if(data.num&&data.userName&&data.userName){//判定是否为空this.tableData.push(data) //数组添加}else{alert("请输入完整信息!")//提示}

效果如下

3.实现修改和删除功能

对每条数据都进行修改和删除，所以把两个功能都放进表格里，在第四列操作内加入如下代码

      <template slot-scope="scope"><el-button-group aligin:right><el-button @click="edit(scope.$index,scope.row)">编辑</el-button><el-button @click="deletee(scope.$index)">删除</el-button></el-button-group></template>

其中编辑删除法中scope可以获取表格数据

<div v-show="ifshow">修改工号<el-inputstyle="width:20%"placeholder="请输入..."v-model="dataEdit.num"></el-input>    修改用户名<el-inputstyle="width:20%"placeholder="请输入..."v-model="dataEdit.userName"></el-input>    修改姓名<el-inputstyle="width:20%"placeholder="请输入..."v-model="dataEdit.name"></el-input>

点击编辑按钮后，显出编辑界面
js代码如下

  edit:function(index,row){this.ifshow=!this.ifshow//控制编辑页面显示this.dataEdit=row//获取表格数据if(this.dataEdit.num>0&&this.dataEdit.userName&&this.dataEdit.name){this.tableData[index].num=this.dataEdit.numthis.tableData[index].userName=this.dataEdit.userNamethis.tableData[index].name=this.dataEdit.name}},deletee:function(index){this.tableData.splice(index,1)}

效果如下

4.实现查询操作

这个是我搞得最长的功能，查询数组用indexof但是获取不到，最后用来过滤器filter。很简单一段代码如下
html

   查询<el-inputstyle="width:20%"placeholder="输入用户名查询"v-model="text"@input="searchh"></el-input>

created() {this.searchResult = this.tableData //存储}searchh:function() {this.searchResult=this.tableData.filter(item => item.userName.includes(this.text))
}

其中要新建给searchResult数组来存储写死的数据,然后把table的data改成新建的数组

总结

最终代码如下

<template>
<div><el-inputstyle="width:20%"placeholder="请输入工号"v-model="tableDataInfo.num"clearable></el-input>    <el-inputstyle="width:20%"placeholder="请输入用户名"v-model="tableDataInfo.userName"></el-input>    <el-inputstyle="width:20%"placeholder="请输入姓名"v-model="tableDataInfo.name"></el-input> <el-buttontype="primary"@click="add">增加</el-button> 查询<el-inputstyle="width:20%"placeholder="输入用户名查询"v-model="text"@input="searchh"></el-input> <el-alerttitle="修改数据时,工号应大于0,且其他数值不为空"type="info"close-text="知道了"></el-alert> <el-table:data="searchResult">//第一列工号<el-table-columnprop="num"label="工号"fixed></el-table-column>//第二列用户名<el-table-columnprop="userName"label="用户名"fixed></el-table-column>//第三列姓名<el-table-columnprop="name"label="姓名"fixed></el-table-column>//第四列操作<el-table-columnalign="center"label="操作"><template slot-scope="scope"><el-button-group aligin:right><el-button @click="edit(scope.$index,scope.row)">编辑</el-button><el-button @click="deletee(scope.$index)">删除</el-button></el-button-group></template></el-table-column>  </el-table><div v-show="ifshow">修改工号<el-inputstyle="width:20%"placeholder="请输入..."v-model="dataEdit.num"></el-input>    修改用户名<el-inputstyle="width:20%"placeholder="请输入..."v-model="dataEdit.userName"></el-input>    修改姓名<el-inputstyle="width:20%"placeholder="请输入..."v-model="dataEdit.name"></el-input> </div>
</div>
</template>
<script>export default {data() {return {  text:'',tableData: [{num: 1,userName: 'zhangsan',name: '张三'}, {num: 2,userName: 'lisi',name: '李四'}, {num: 3,userName: 'wangwu',name: '王五'}, {num: 4,userName: 'zhaoliu',name: '赵六'}],tableDataInfo:{num:'',userName:'',name:''},dataEdit:{num:'',userName:'',name:''},ifshow:false,searchResult:[]}}, created() {this.searchResult = this.tableData},methods:{add:function(){var data ={num:this.tableDataInfo.num,userName:this.tableDataInfo.userName,name:this.tableDataInfo.name}if(data.num&&data.userName&&data.userName){//判定是否为空this.tableData.push(data)}else{alert("请输入完整信息!")//提示}},searchh:function() {this.searchResult=this.tableData.filter(item => item.userName.includes(this.text))},edit:function(index,row){this.ifshow=!this.ifshowthis.dataEdit=rowif(this.dataEdit.num>0&&this.dataEdit.userName&&this.dataEdit.name){this.tableData[index].num=this.dataEdit.numthis.tableData[index].userName=this.dataEdit.userNamethis.tableData[index].name=this.dataEdit.name }},deletee:function(index){this.tableData.splice(index,1)}}
}
</script>

一个小尝试，记录一下，后面可以继续完善，欢迎指正。

使用v-cli创建项目，引入element-ui构建用户管理页面实现增删改查相关推荐

mysql用创建的用户登陆并修改表格_MySQL 基础学习二：创建一个用户表，并增删改查...
MySQL 基础学习二:创建一个用户表,并增删改查提示:MySQL 命令建议都用大写,因为小写运行时,还是翻译成大写的. 第一步,创建一个用户表 1,打开控制台,进入数据库 C:\Users\Ad ...
linux下创建mysql用户，并且给增删改查的权限
首先,需要明确下需求,我这边是要求在服务器上新建一个mysql用户,然后可以用外网来访问,其次就是需要给出增删改查的权限.权限的话,后期会做一些修改,目前就是图个方便,, 1.首先是xshell连接I ...
OA中项目关系，实体设计，映射实体，增删改查
=============== 步骤 ================ 1,充分了解需求(包括所有的细节):分析页面等. 2,设计实体/表正向工程:设计实体 --> 建表(推荐):设计实体 ...
新手上路之django项目开发（二）-----mysql数据库配置及其增删改查操作
1,数据库配置(settings.py文件配置) 我这里用的是本地数据库. DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql', ...
ASP.NET中新建MVC项目并连接SqlServer数据库实现增删改查
场景 ASP.NET中MVC编程模式简介与搭建HelloWorld项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10679 ...
.net mvc html访问数据库,ASP.NET中新建MVC项目并连接SqlServer数据库实现增删改查
场景 ASP.NET中MVC编程模式简介与搭建HelloWorld项目: 在上面使用MVC搭建起来Hello World项目后,怎样连接SqlServer数据库并实现增删改查. 这里使用的是Visua ...
一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...

使用v-cli创建项目，引入element-ui构建用户管理页面实现增删改查

文章目录

前言

一、使用v-cli创建vue项目文件

二、引入element-ui

三、开始实现功能

1.初步页面，表格绘制

2.实现增加功能

3.实现修改和删除功能

4.实现查询操作

总结

使用v-cli创建项目，引入element-ui构建用户管理页面实现增删改查相关推荐

最新文章

热门文章