vue+element-ui实现权限角色添加编辑删除效果代码
代码语言：html
所属分类：布局界面
代码描述：vue+element-ui实现权限角色添加编辑删除效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权限管理模块</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.oneMenu {
width: 32%;
float: left;
margin-left: 1%;
}
.sonMenu {
width: 49%;
float: left;
margin-left: 0.5%;
margin-right: 0.5%;
}
.mg-t20 {
margin-top: 20px;
}
.pd-t10-b20 {
padding-top: 10px;
padding-bottom: 20px;
}
.pd-lr10 {
padding-left: 10px;
padding-right: 10px;
}
.pd-t2-l10 {
padding: 2px 10px;
}
.textL {
text-align: left;
}
/* reset */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
list-style: none;
}
.wrapBox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.h50 {
height: 50px;
line-height: 50px;
font-size: 16px;
padding: 0 10px;
text-align: left;
margin-bottom: 5px;
}
.pd10 {
padding: 10px;
}
.pd-lr10 {
padding-left: 10px;
padding-right: 10px;
}
.pd-l10 {
padding-left: 10px;
}
.pd-10 {
padding-bottom: 10px;
}
.mg-b5 {
margin-bottom: 5px;
}
.vCenter {
display: flex;
align-items: center;
}
/* 瀛椾綋 */
.font12 {
font-size: 12px;
}
.myDialog .el-dialog {
border-radius: 5px;
overflow: hidden;
}
.myDialog .el-dialog__body {
padding: 10px;
}
.blueHead .el-dialog__header {
/* background-color: #9eaab7; */
background-color: #5eb198;
}
.blueHead .el-dialog__title {
font-size: 16px;
color: #fff;
}
.blueHead .el-dialog__close {
color: #fff;
}
.el-dialog__header {
padding: 10px;
}
.radius_tl5 {
border-top-left-radius: 5px;
}
.radius_bl5 {
border-bottom-left-radius: 5px;
}
.radius_tbl5 {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.hand {
cursor: pointer;
}
.myBlue {
color: #409EFF;
}
.redColor,.myRed {
color: #f73f3f;
}
</style>
<!-- 饿了么 图标库 引入样式 -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/elementui.css">
<!-- 饿了么 引入组件库 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/elementui.js"></script>
<style>
.pageTitle {
text-align: center;
font-size: 18px;
background: #91ccb1;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
</style>
</head>
<body>
<div id="app">
<p class="pageTitle" style="margin-bottom: 10px">
权限管理模块
</p>
<p class="textL" style="margin-bottom: 10px;padding: 0 20px;">
角色列表：<el-button @click="addRole" size="mini" type="primary"
>增加角色</el-button
>
</p>
<div style="margin:20px;">
<el-table :data="allRole" border size="mini">
<el-table-column type="index" label="序号" width="60"></el-table-column>
<el-table-column prop="name" label="角色名" width="200"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="editRow(scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="delRow(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 弹框部分 -->
<el-dialog :title="isAdd ? '新增角色' : '修改角色'" class="myDialog blueHead textL" :visible.sync="showRight"
:close-on-click-modal="false" width="1200px">
<div style="padding: 0 15px;">
<p v-if="isAdd" style="background-color: #eee; padding: 5px">
角色名称：
<el-input style="width: 250px" size="mini" @blur="blurFun(currentRole.name)" v-model="currentRole.name">
</el-input>
</p>
<p v-else>
当前角色：{{ currentRole.name }}
</p>
<div style="max-height: 560px; overflow: auto;">
<todo-box class="sonMenu textL mg-t20" style="border: 1px solid #eee;"
v-for="(item,index) in currentRole.allRight"
v-bind:item="item"
v-bind:key="item.name+index"
@topClicka="topClickF"
@titleClickson="titleClickFa">
</todo-box>
<!--
现在我们为每个 todo-item 提供待办项对象
待办项对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。
-->
<!-- <div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div> -->
<!--
<anchored-heading :level="1">
asdfasdf
</anchored-heading>
<button-counter></button-counter> -->
</div>
<p style="text-align: right; margin-bottom: 15px; margin-top: 10px">
<el-button @click="showRight = false" size="mini">取 消</el-button>
<el-button v-if="isAdd" size="mini" type="primary" @click="saveRole(currentRole)">确 定</el-button>
<el-button v-else size="mini" type="primary" @click="updateRole(currentRole)">修 改</el-button>
</p>
</div>
</el-dialog>
</div>
<script>
// 1.至于过程和实现，有不懂的，都可以问喔！我的微信号 yizheng369
// 2.github源码地址https://github.com/banana618859/workArrange.git
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
// render Vue.component注册的组件，必须要在vue实例创建之前（即在 new Vue()之前），否则不生效
Vue.component('anchored-heading22', {
render: function (createElement) {
console.warn('render：', this);
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})
Vue.component('content-box', {
template: `
<div style="border:1px solid #eee;" class="pd-t10-b20 pd-lr10">
<span v-for="(item,index) in data" :key="faName+'_'+item.name+index" style="margin-right:10px;">
<el-checkbox v-model="item.check" @change="changeFun(faName+'_'+item.name, item.check)">{{item.name}}</el-checkbox>
</span>
</div>`,
props: {
data: {
type: Array,
default: () => []
},
faName: {
type: String,
default: ''
}
},
methods: {
changeFun() {
console.error('content-box-changeFun:');
this.$emit('clickOne', ...arguments)
}
},
data() {
return {}
}
})
Vue.component('list-box', {
template: `
<div>
<div v-for="(item,index) in data" :key="item.name+index" class="sonMenu" style="padding:5px; margin-top:10px; margin-bottom:10px;" >
<p style="background-color: #d5dfdc;" class="pd-t2-l10">
<el-checkbox v-model="item.check" @change="titleClick(faName+'_'+item.name,item.check)">{{item.name}}</el-checkbox>
</p>
<list-box v-if="item.children && item.children[0].children" :data="item.children" :faName="faName+'_'+item.name"></list-box>
<content-box v-else :data="item.children" :faName="faName+'_'+item.name" @clickOne="clickOne"></content-box>
</div>
</div>`,
props: {
data: {
type: Array,
default: () => []
},
faName: {
type: String,
default: ''
}
},
methods: {
titleClick() {
console.error('l-b-titleClick:', arguments);
this.$emit('titleClick', ...arguments)
},
clickOne(a) {
console.error('l-b-clickOne:', arguments);
this.$emit('clickOne', ...arguments)
}
},
data() {
return {}
}
})
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
// 创建组件
var login = {
template: "<h1>登录组件</h1>"
}
var vm = new Vue({
el: '#app',
data() {
return {
bllRight: [],
groceryList: [],
isAdd: true,
showRight: false,
baseRole: {
name: "",
allRight: [{
name: "用户权限管理",
check: true,
children: [{
name: "用户管理",
check: true,
children: [{
name: "增",
action: "add",
check: true
},
{
name: "删",
action: "delete",
check: true
},
{
name: "查",
action: "read",
check: true
},
{
name: "改",
action: "update",
check: true
},
],
},
{
name: "角色管理",
check: true,
children: [{
name: "增",
action: "add",
check: true
},
{
name: "删",
action: "delete",
check: true
},
],
},
],
},
{
name: "库存管理",
check: true,
children: [{
name: "入库管理",
check: true,
children: [{
name: "增",
action: "add",
check: true
},
{
name: "删",
action: "delete",
check: true
},
],
},
{
name: "出库管理",
check: true,
children: [{
name: "增",
action: "add",
check: true
},
{
name: "删",
action: "delete",
check: true
},
],
},
{
name: "盘点管理",
check: true,
children: [{
name: "增",
action: "add",
check: true
},
{
name: "删",
action: "delete",
check: true
},
],
},
],
},
{
name: "分类管理",
check: true,
children: [{
name: "物料管理",
check: true,
children: [{
name: "增",
action: "add",
check: true
},
{
name: "删",
action: "delete",
check: true
},
],
},
{
name: "分类管理",
check: true,
children: [{
name: "增",
action: "add",
check: true
},
{
name: "删",
action: "delete",
check: true
},
],
},
],
},
{
name: "其他管理",
check: true,
children: [{
name: "其他管理1",
check: true,
children: [{
name: "增",
action: "add",
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0