vue.js+Element实现表格里的增删改查


Posted in Javascript onJanuary 18, 2017

新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充

之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js

下面就介绍一下vue.js应用在表格里的增删改查

首先引入一下element的js

<script src="plugins/element-ui/index.js"></script>

然后引入需要用到的vue相关的js文件

<script src="plugins/vue/vue.js"></script>
<script src="plugins/vue/vue-resource.js"></script>
<script src="plugins/vue/vue-moment.min.js"></script>
<script src="js/jquery.min.js"></script>

下面先说一下html文件

<div id="user">
 <!-- 操作 -->
 <ul class="btn-edit fr">
 <li >
 <el-button type="primary" @click="dialogCreateVisible = true">添加用户</el-button>
 <el-button type="primary" icon="delete" :disabled="selected.length==0" @click="removeUsers()" >删除</el-button>
 <el-button type="primary" icon="edit" :disabled="selected.length==0" >停用</el-button>
 <el-button type="primary" icon="edit" :disabled="selected.length==0" >激活</el-button>
 </li>
 </ul>
 <!-- 用户列表-->
 <el-table :data="users"
 stripe
 v-loading="loading"
 element-loading-text="拼命加载中..."
 style="width: 100%"
 height="443"
 @sort-change="tableSortChange"
 @selection-change="tableSelectionChange">
 <el-table-column type="selection"
 width="60">
 </el-table-column>
 <el-table-column sortable="custom" prop="username"
 label="用户名"
 width="120">
 </el-table-column>
 <el-table-column prop="name"
 label="姓名"
 width="120">
 </el-table-column>
 <el-table-column prop="phone"
 label="手机"
 >
 </el-table-column>
 <el-table-column prop="email"
 label="邮箱">
 </el-table-column>
 <el-table-column prop="create_time" sortable="custom" inline-template
 label="注册日期"
 width="260">
 <div>{{ row.create_time | moment('YYYY年MM月DD日 HH:mm:ss')}}</div>
 </el-table-column>
 <el-table-column inline-template
 label="操作"
 width="250">
 <el-button type="primary" size="mini" @click="removeUser(row)">删除</el-button>
 <el-button type="primary" size="mini" @click="setCurrent(row)">编辑</el-button>
 </el-table-column>
 </el-table>
 <!--分页begin-->
 <el-pagination class="tc mg"
 :current-page="filter.page"
 :page-sizes="[10, 20, 50, 100]"
 :page-size="filter.per_page"
 layout="total, sizes, prev, pager, next, jumper"
 :total="total_rows"
 @size-change="pageSizeChange"
 @current-change="pageCurrentChange">
 </el-pagination>
 <!--分页end-->
</div>

这一段是element的表单以及编辑还有分页样式 可以直接复制进来 其中添加了一些click操作 后面需要用到,然后我们就开始引入js

了解过vuejs的应该知道这样的结构 data里面填写我们获取的数据 一些规则 定义一些变量

在methods进行我们的操作

vm = new Vue({
 el: '#user',
 data:{},
 methods:{}
 })

首先 我们先从读取数据开始

放入你的url

users是表格绑定的数组 也是存放从后台获取的数据

将需要显示的数据放在filter中

vm = new Vue({
 el: '#user',
 // 数据模型
 data: function() {
 return {
 url: 'url',
 users: [],
 filter: {
 per_page: 10, // 页大小
 page: 1, // 当前页
 name:'',
 username:'',
 phone:'',
 is_active:'',
 sorts:''
 },
 total_rows: 0,
 loading: true,
 };
 },
 methods:{}
})

接下来我们添加methods

pageSizeChange() 以及 pageCurrentChange()是用于分页的函数

在query() 是用于搜索的项目

getUsers() 就是用于获取数据

methods: {
 pageSizeChange(val) {
 this.filter.per_page = val;
 this.getUsers();
 },
 pageCurrentChange(val) {
 this.filter.page = val;
 this.getUsers();
 },
 query(){
 this.filter.name='';
 this.filter.username='';
 this.filter.phone='';
 this.filter[this.select]=this.keywords;
 this.getUsers();
 },
 // 获取用户列表
 getUsers() {
 this.loading = true;

 var resource = this.$resource(this.url);
 resource.query(this.filter)
 .then((response) => {
 this.users = response.data.datas;
 this.total_rows = response.data.total_rows;
 this.loading = false;
 })
 .catch((response)=> {
 this.$message.error('错了哦,这是一条错误消息');
 this.loading = false;
 });

 },
 }

读取完数据之后 我们可以看见数据是按照每页十条显示 是上面我们默认设置的

下面进行删除操作 删除我设置的是单挑删除以及多条删除

因为删除需要选中 所以我们需要加入选中的变量

vm = new Vue({
 el: '#user',
 // 数据模型
 data: function() {

 return {
 url: 'http://172.10.0.201/api/v1/accounts',
 users: [
 ],
 filter: {
 per_page: 10, // 页大小
 page: 1, // 当前页
 name:'',
 username:'',
 phone:'',
 is_active:'',
 sorts:''
 },
 total_rows: 0,
 loading: true,
 selected: [], //已选择项
 };
 },

然后在methods也要加入选中的函数

tableSelectionChange(val) {
 console.log(val);
 this.selected = val;
 },
// 删除单个用户

 removeUser(user) {
 this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续?', '提示', { type: 'warning' }) 
 .then(() => { // 向请求服务端删除 
 var resource = this.$resource(this.url + "{/id}"); 
 resource.delete({ id: user.id }) 
 .then((response) => { 
 this.$message.success('成功删除了用户' + user.username + '!'); this.getUsers(); }) 
 .catch((response) => { 
 this.$message.error('删除失败!'); 
 }); 
 }) .catch(() => { 
 this.$message.info('已取消操作!');
 }); 
}, 
//删除多个用户 
removeUsers() { 
 this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', { type: 'warning' }) 
 .then(() => { 
 console.log(this.selected); 
 var ids = []; //提取选中项的id 
 $.each(this.selected,(i, user)=> { ids.push(user.id); }); // 向请求服务端删除var resource = this.$resource(this.url);
 resource.remove({ids: ids.join(",") 
 }) .then((response) => { 
 .catch((response) => { 
 this.$message.error('删除失败!'); 
 }); 
 }) 
 .catch(() => { 
 }); 
}

接下来就进行到编辑和添加

由于删除和编辑需要加入表单

<!-- 创建用户 begin-->
 <el-dialog title="创建用户" v-model="dialogCreateVisible" :close-on-click-modal="false" :close-on-press-escape="false" @close="reset" >
 <el-form id="#create" :model="create" :rules="rules" ref="create" label-width="100px">
 <el-form-item label="用户名" prop="username">
 <el-input v-model="create.username"></el-input>
 </el-form-item>
 <el-form-item label="姓名" prop="name">
 <el-input v-model="create.name"></el-input>
 </el-form-item>
 <el-form-item label="密码" prop="password">
 <el-input v-model="create.password" type="password" auto-complete="off"></el-input>
 </el-form-item>
 <el-form-item label="确认密码" prop="checkpass">
 <el-input v-model="create.checkpass" type="password"></el-input>
 </el-form-item>
 <el-form-item label="电话" prop="phone">
 <el-input v-model="create.phone"></el-input>
 </el-form-item>
 <el-form-item label="邮箱" prop="email">
 <el-input v-model="create.email"></el-input>
 </el-form-item>
 <el-form-item label="是否启用">
 <el-switch on-text="" off-text="" v-model="create.is_active"></el-switch>
 </el-form-item>
 </el-form>
 <div slot="footer" class="dialog-footer">
 <el-button @click="dialogCreateVisible = false">取 消</el-button>
 <el-button type="primary" :loading="createLoading" @click="createUser">确 定</el-button>
 </div>
 </el-dialog>
 <!-- 修改用户 begin-->
 <el-dialog title="修改用户信息" v-model="dialogUpdateVisible" :close-on-click-modal="false" :close-on-press-escape="false">
 <el-form id="#update" :model="update" :rules="updateRules" ref="update" label-width="100px">
 <el-form-item label="姓名" prop="name">
 <el-input v-model="update.name"></el-input>
 </el-form-item>
 <el-form-item label="电话" prop="phone">
 <el-input v-model="update.phone"></el-input>
 </el-form-item>
 <el-form-item label="邮箱" prop="email">
 <el-input v-model="update.email"></el-input>
 </el-form-item>
 <el-form-item label="是否启用">
 <el-switch on-text="" off-text="" v-model="update.is_active"></el-switch>
 </el-form-item>
 </el-form>
 <div slot="footer" class="dialog-footer">
 <el-button @click="dialogUpdateVisible = false">取 消</el-button>
 <el-button type="primary" :loading="updateLoading" @click="updateUser">确 定</el-button>
 </div>
 </el-dialog>

因为有表单 所以我们需要加入表单验证

以及添加和编辑弹出的状态

vm = new Vue({
 el: '#user',
 // 数据模型
 data: function() {

 var validatePass = (rule, value, callback) => {
 if (value === '') {
 callback(new Error('请再次输入密码'));
 } else if (value !== this.create.password) {
 callback(new Error('两次输入密码不一致!'));
 } else {
 callback();
 }
 };

 return {
 url: 'http://172.10.0.201/api/v1/accounts',
 users: [
 ],
 create: {
 id: '',
 username: '',
 name: '',
 password: '',
 checkpass: '',
 phone: '',
 email: '',
 is_active: true
 },
 currentId:'',
 update:{
 name: '',
 phone: '',
 email: '',
 is_active: true
 },
 rules: {
 name: [
 { required: true, message: '请输入姓名', trigger: 'blur' },
 { min: 3, max: 15, message: '长度在 3 到 15 个字符'}
 ],
 username: [
 { required: true, message: '请输入用户名', trigger: 'blur' },
 { min: 3, max: 25, message: '长度在 3 到 25 个字符'},
 { pattern:/^[A-Za-z0-9]+$/, message: '用户名只能为字母和数字'}
 ],
 password: [
 { required: true, message: '请输入密码', trigger: 'blur' },
 { min: 6, max: 25, message: '长度在 6 到 25 个字符'}
 ],
 checkpass: [
 { required: true, message: '请再次输入密码', trigger: 'blur' },
 { validator: validatePass}
 ],
 email: [
 { type: 'email', message: '邮箱格式不正确'}
 ],
 phone:[
 { pattern:/^1[34578]\d{9}$/, message: '请输入中国国内的手机号码'}
 ]
 },
 updateRules: {
 name: [
 { required: true, message: '请输入姓名', trigger: 'blur' },
 { min: 3, max: 15, message: '长度在 3 到 15 个字符'}
 ],
 email: [
 { type: 'email', message: '邮箱格式不正确'}
 ],
 phone:[
 { pattern:/^1[34578]\d{9}$/, message: '请输入中国国内的手机号码'}
 ]
 },
 filter: {
 per_page: 10, // 页大小
 page: 1, // 当前页
 name:'',
 username:'',
 phone:'',
 is_active:'',
 sorts:''
 },
 total_rows: 0,
 loading: true,
 selected: [], //已选择项
 dialogCreateVisible: false, //创建对话框的显示状态
 dialogUpdateVisible: false, //编辑对话框的显示状态
 createLoading: false,
 updateLoading: false,
 };
 },

下面就加入添加和编辑的函数

methods: {
 tableSelectionChange(val) {
 console.log(val);
 this.selected = val;
 },
 pageSizeChange(val) {
 console.log(`每页 ${val} 条`);
 this.filter.per_page = val;
 this.getUsers();
 },
 pageCurrentChange(val) {
 console.log(`当前页: ${val}`);
 this.filter.page = val;
 this.getUsers();
 },
 setCurrent(user){
 this.currentId=user.id;
 this.update.name=user.name;
 this.update.phone=user.phone;
 this.update.email=user.email;
 this.update.is_active=user.is_active;
 this.dialogUpdateVisible=true;
 },
 // 重置表单
 reset() {
 this.$refs.create.resetFields();
 },
 query(){
 this.filter.name='';
 this.filter.username='';
 this.filter.phone='';
 this.filter[this.select]=this.keywords;
 this.getUsers();
 },
 // 获取用户列表
 getUsers() {
 this.loading = true;

 var resource = this.$resource(this.url);
 resource.query(this.filter)
 .then((response) => {
 this.users = response.data.datas;
 this.total_rows = response.data.total_rows;
 this.loading = false;
 })
 .catch((response)=> {
 this.$message.error('错了哦,这是一条错误消息');
 this.loading = false;
 });

 },

 // 创建用户
 createUser() {
 // 主动校验
 this.$refs.create.validate((valid) => {
 if (valid) {
 this.create.id=getuuid();
 this.createLoading=true;
 var resource = this.$resource(this.url);
 resource.save(this.create)
 .then((response) => {
 this.$message.success('创建用户成功!');
 this.dialogCreateVisible=false;
 this.createLoading=false;
 this.reset();
 this.getUsers();
 })
 .catch((response) => {
 var data=response.data;
 if(data instanceof Array){
 this.$message.error(data[0]["message"]);
 }
 else if(data instanceof Object){
 this.$message.error(data["message"]);
 }
 this.createLoading=false;
 });
 } 
 else {
 //this.$message.error('存在输入校验错误!');
 return false;
 }
 });

 },

 // 更新用户资料
 updateUser() {
 this.$refs.update.validate((valid) => {
 if (valid) {
 this.updateLoading=true;
 var actions = {
 update: {method: 'patch'}
 }
 var resource = this.$resource(this.url,{},actions);
 resource.update({"ids":this.currentId},this.update)
 .then((response) => {
 this.$message.success('修改用户资料成功!');
 this.dialogUpdateVisible=false;
 this.updateLoading=false;
 //this.reset();
 this.getUsers();
 })
 .catch((response) => {
 var data=response.data;
 console.log(data);
 if(data instanceof Array){
 this.$message.error(data[0]["message"]);
 }
 else if(data instanceof Object){
 this.$message.error(data["message"]);
 }
 this.updateLoading=false;
 });
 } 
 else {
 //this.$message.error('存在输入校验错误!');
 return false;
 }
 });
 },

 // 删除单个用户
 removeUser(user) {
 this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续?', '提示', { type: 'warning' })
 .then(() => {
 // 向请求服务端删除
 var resource = this.$resource(this.url + "{/id}");
 resource.delete({ id: user.id })
 .then((response) => {
 this.$message.success('成功删除了用户' + user.username + '!');
 this.getUsers();
 })
 .catch((response) => {
 this.$message.error('删除失败!');
 });
 })
 .catch(() => {
 this.$message.info('已取消操作!');
 });
 },

 //删除多个用户
 removeUsers() {
 this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', { type: 'warning' })
 .then(() => {
 console.log(this.selected);
 var ids = [];
 //提取选中项的id
 $.each(this.selected,(i, user)=> {
 ids.push(user.id);
 });
 // 向请求服务端删除
 var resource = this.$resource(this.url);
 resource.remove({ids: ids.join(",") })
 .then((response) => {
 this.$message.success('删除了' + this.selected.length + '个用户!');
 this.getUsers();
 })
 .catch((response) => {
 this.$message.error('删除失败!');
 });
 })
 .catch(() => {
 this.$Message('已取消操作!');
 });
 }
 }

这就是整个增删改查的过程

demo地址:http://xiazai.3water.com/201701/yuanma/vuejs-element_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
JQuery学习总结【二】
Dec 01 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
JS中Array数组学习总结
Jan 18 #Javascript
原生javascript实现图片放大镜效果
Jan 18 #Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 #Javascript
原生js实现回复评论功能
Jan 18 #Javascript
js实现表格筛选功能
Jan 18 #Javascript
js放大镜放大购物图片效果
Jan 18 #Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 #Javascript
You might like
用函数读出数据表内容放入二维数组
2006/10/09 PHP
PHP 类型转换函数intval
2009/06/20 PHP
一步一步学习PHP(3) php 函数
2010/02/15 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
jQuery中append()方法用法实例
2015/01/08 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python numpy 点数组去重的实例
2018/04/18 Python
Python Pillow Image Invert
2019/01/22 Python
python3中eval函数用法使用简介
2019/08/02 Python
浅析python连接数据库的重要事项
2021/02/22 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
联谊会主持词
2014/03/26 职场文书
李开复演讲稿
2014/05/24 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
决心书格式及范文
2019/06/24 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
python绘制箱型图
2021/04/27 Python