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,有就调修改接口**
下面直接上代码了
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204<template> <div> <!-- 面包屑导航 --> <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"> <div class="grid-content bg-purple"></div> <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> </div> </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+elementui 实现新增和修改共用一个弹框的完整代码的全部内容,更多相关vue+elementui内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复