vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
类别:编程学习 浏览量:2032
时间:2022-01-15 01:16:24 vue elementui 按钮样式修改
vue+elementui 实现新增和修改共用一个弹框的完整代码目录
- 一、新增
- 二、修改
element-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌面组件库,而手机端有对应框架是 Mint UI 。整个ui风格简约,很实用,同时也极大的提高了开发者的效率,是一个非常受欢迎的组件库。
一、新增1、新增按钮
2、新增事件 在methods中,用来打开弹窗,
dialogVisible在data中定义使用有true或false来控制显示弹框
**3、新增确定,弹框确定事件 ,新增和修改共用一个确定事件,使用id区别
**3、新增事件
调新增接口,判断是否有id,没有就调新增接口
二、修改2-1、修改按钮 ,表格行编辑按钮使用scope.row拿到当前行的数据
2-2、修改事件, 把当前行数据赋值给表单,就把当前行数据回显出来了
2-3、修改事件
修改接口,判断是否有id,有就调修改接口**
下面直接上代码了
<template> <li> <!-- 面包屑导航 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/Welcome' }">首页</el-breadcrumb-item> <el-breadcrumb-item>权限管理</el-breadcrumb-item> <el-breadcrumb-item>角色列表</el-breadcrumb-item> </el-breadcrumb> <!-- 卡片 --> <el-card class="box-card"> <!-- 新增按钮 --> <el-row :gutter="20"> <el-col :span="6"> <li class="grid-content bg-purple"></li> <el-button type="primary" @click="onhandAdd">添加角色</el-button> </el-col> </el-row> <!-- 表格 --> <el-table :data="tableData" border="" style="width: 100%"> <el-table-column type="expand"> <template slot-scope="scope"> <el-row :class="['bdbottom',i1 === 0? 'bdtop' : '', 'vcenter'] " :gutter="20" :span="6" v-for="(item_ong,i1) in scope.row.children" :key="item_ong.id" > <!-- 一级 --> <el-col :span="5"> <el-tag>{{item_ong.authName}}</el-tag> <i class="el-icon-caret-right"></i> </el-col> <!-- 二级和三级 --> <el-col :span="19"> <!-- 二级权限 --> <el-row v-for="(item_two,i2) in item_ong.children" :key="i2"> <el-col :span="6"> <el-tag type="success">{{item_two.authName}}</el-tag> <i class="el-icon-caret-right"></i> </el-col> <el-col :span="18"> <el-tag type="warning" v-for="(item_three,i3) in item_two.children" :key="i3" >{{item_three.authName}}</el-tag> <i class="el-icon-caret-right"></i> </el-col> </el-row> </el-col> </el-row> </template> </el-table-column> <el-table-column label="#" type="index" width="80"></el-table-column> <el-table-column label="角色名称" prop="roleName"></el-table-column> <el-table-column label="角色描述" prop="roleDesc"></el-table-column> <el-table-column label="操作" prop="id"> <template slot-scope="scope"> <el-button type="primary" icon="el-icon-edit" size="small" @click="handleEdit(scope.$index, scope.row)" >编辑</el-button> <el-button type="warning" icon="el-icon-delete" size="small">删除</el-button> <el-button type="danger" icon="el-icon-edit" size="small">权限</el-button> </template> </el-table-column> </el-table> </el-card> <!-- 新增编辑弹框 --> <el-dialog :title="addtitle" :visible.sync="dialogVisible" width="40%" :before-close="handleClose" > <el-form :model="ruleForm" :rules="rules" ref="refRuleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="角色名称" prop="roleName"> <el-input v-model="ruleForm.roleName"></el-input> </el-form-item> <el-form-item label="角色描述" prop="roleDesc"> <el-input v-model="ruleForm.roleDesc"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button> </span> </el-dialog> </li> </template> <script> export default { data() { return { tableData: [], dialogVisible: false, addtitle: "添加角色", ruleForm: { roleName: "", roleDesc: "" }, allid: "", // 验证规则 rules: { roleName: [ { required: true, message: "请输入角色名称", trigger: "blur" }, { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" } ], roleDesc: [{ required: true, message: "角色描述", trigger: "blur" }] } }; }, created() { this.tabList(); }, methods: { // 表格接口列表 tabList() { this.$api.jurisdiction.rolelist().then(res => { console.log(res.data.data, "]]]]]]]"); this.tableData = res.data.data; }); }, // 新增 onhandAdd() { this.dialogVisible = true; }, handleClose(done) { this.dialogVisible = false; }, // 编辑 handleEdit(index, row) { console.log(index, row.id); this.dialogVisible = true; //显示弹框 this.ruleForm = row; //row当前行数据,把当前行的数据赋值给 表单 this.allid = row.id; //把id存全局 }, // 确定 dialogVisibleConfirm() { // 新增接口 if (!this.allid) { this.$api.jurisdiction.addrole(this.ruleForm) .then(res => { // console.log(res,"新增") this.$message.success("添加成功"); //新增成功消息提示 this.$refs.refRuleForm.resetFields(); //清空表格数据 this.dialogVisible = false; //关闭弹框 this.tabList(); //刷新列表 }) .catch(res => { this.$message.error("添加失败"); }); } else { // 修改接口 let id = this.allid let params = { roleName:this.ruleForm.roleName, roleDesc:this.ruleForm.roleDesc, } this.$api.jurisdiction.edtrole(id,params) .then(res => { console.log(res,"修改") this.$message.success("修改成功"); this.$refs.refRuleForm.resetFields(); this.dialogVisible = false; this.tabList(); }) .catch(res => { this.$message.error("修改失败"); }); } } } }; </script> <style scoped> .bdtop { border-top: 1px solid #eee; padding-top: 10px; } .bdbottom { border-bottom: 1px solid #eee; padding-bottom: 10px; padding-top: 10px; } .el-tag { margin: 10px 0px; } .vcenter { display: flex; align-items: center; } </style>
以上就是vue+elementui 实现新增和修改共用一个弹框的完整代码的详细内容,更多关于vue elementui弹框的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue 实现吸顶效果(vue实现水波涟漪效果的点击反馈指令)
- vue代码统计(Vue实现计数器案例)
- vue切换图片效果(Vue.js实现图片切换功能)
- 使用vue独立开发组件(vue单文件组件的实现)
- vue 怎么设置滚动条的长度(vue使用better-scroll实现横向滚动的方法实例)
- vue3兼容的插件多吗(关于vue3编写挂载DOM的插件问题)
- vue 路由的两种模式(Vue3使用路由VueRouter4的简单示例)
- vue移动端项目用什么打包工具(浅谈使用Vue完成移动端apk项目)
- vue导出动态的excel功能(vue中如何下载excel流文件及设置下载文件名)
- ant design 的vue批量操作(ant desing vue table 实现可伸缩列的完整例子)
- vue代码和element用法(Vue Element前端应用开发之整合ABP框架的前端登录)
- vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vue组件滚动加载教程(Vue组件封装上传图片和视频的示例代码)
- vue十大基础知识(vue实战中的一些实用小魔法汇总)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
- 对你思念入骨的女人,跟你见面时会有这几种表现,藏都藏不住(对你思念入骨的女人)
- 纳兰性德绝美作,一场重逢,成就最后一首称得上惊艳的《如梦令》(纳兰性德绝美作)
- 如何快速赚钱(如何快速赚钱方法真实有效)
- 这里输入关键词(如何输入关键词)
- 熊猫中国国宝(熊猫国宝酒53酱香)
- 春节会放假几天(春节会放假吗)
热门推荐
- SQLServer数据库从高版本降级到低版本实例详解(SQLServer数据库从高版本降级到低版本实例详解)
- 虚拟主机和云服务器有什么区别吗(云服务器和云虚拟主机两者的有什么区别?)
- dedecms更新后支付宝接口提示错误ILLEGAL_EXTERFACE的解决方法(dedecms更新后支付宝接口提示错误ILLEGAL_EXTERFACE的解决方法)
- postgresql docker 宿主机(本地Docker安装Postgres 12 + pgadmin的方法 支持Apple M1)
- python函数的参数有几种类型(在Python中居然可以定义两个同名参数的函数)
- 云服务器设置方法(怎么配置云服务器)
- hive数值转字符串(hive中将string数据转为bigint的操作)
- python排列组合计算方法(Python实现的排列组合、破解密码算法示例)
- vue移动端图片放大效果实现(vue实现图片切换效果)
- php小例子(PHP反射实际应用示例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9