vue+element-ui树形多级菜单选择效果代码
代码语言：html
所属分类：菜单导航
代码描述：vue+element-ui树形多级菜单选择效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>tree</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">
<style>
.chuseIpt{
display:flex;
flex-wrap:wrap;
margin-bottom:10px
}
.chuseIpt>span{
width:auto;
display: inline-block;
margin-top:10px
}
.el-table__header,.el-table__body{
width:100%!important
}
.el-table__header colgroup col[name=gutter]{
display:none
}
.el-table__body colgroup col,.el-table__header colgroup col{
width:20%
}
.el-table__header thead{
position: relative;
}
.el-table__header thead tr:nth-child(2){
position: absolute;
z-index: 99;
width: 100%;
top: 5px;
background: transparent;
display:flex
}
.el-table__header thead tr:nth-child(2) th{
width: 20%;
background: transparent;
border: 0;
}
.el-table__header thead tr:nth-child(2) th .cell{
padding-left: calc(50% + 38px);
}
.el-table__body .el-table-column--selection .cell{
text-align:center
}
.el-input-group{
width: auto;
}
.el-input-group>.el-input__inner,.el-input__suffix{
cursor:pointer
}
.el-input__inner{
width:220px
}
.el-input__inner[name=qxuser]{
width:120px
}
.el-input-group__prepend{
padding:0 10px
}
.btn_box{
margin-left:15px;
padding-top:10px
}
.el-table_1_column_2 .cell,.el-table_1_column_3 .cell,.el-table_1_column_4 .cell,.el-table_1_column_5 .cell{
text-align:center
}
.el-cascader-node>.el-radio, .el-radio:last-child{
display:flex
}
.el-icon-arrow-right:before{
content: "\e791";
padding: 6px;
cursor: pointer;
color: #C0C4CC;
}
.treeTitle{
display:flex;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #efefef;
}
.treeTitle>div{
height:40px ;
display:flex;
justify-content: center;
align-items: center;
border-right:1px solid #ccc;
width:33vw
}
.treeTitle>div:nth-child(1){
border-left:1px solid #ccc;
flex:1
}
.el-tree-node__content{
height:40px;
border-bottom: 1px solid #EBEEF5;
}
.custom-tree-node{
width: calc(100% - 24px);
}
.custom-tree-node .el-row{
display:flex
}
.custom-tree-node .el-row .el-col{
height:40px ;
display:flex;
justify-content: center;
align-items: center;
border-right:1px solid #EBEEF5;
width:33vw
}
.custom-tree-node .el-row .el-col:nth-child(1){
border-left:0;
flex:1;
justify-content: flex-start;
}
.openurl{
color:#409EFF;
position:relative;
cursor:pointer
}
.openurl:after{
content:'';
width:100%;
height:1px;
background:#409EFF;
position:absolute;
left:0;
bottom:-2px
}
.tree2 .el-tree-node__content>.el-tree-node__expand-icon,.tree3 .el-tree-node__content>.el-tree-node__expand-icon{
display:none
}
.treeDom,.treeTitle>div{
width:33vw
}
.treeDom:nth-child(1),.treeTitle>div:nth-child(1){
flex: 1;
}
.custom-tree-node .el-row .el-col{
position:relative
}
.el-checkbox{
position: initial;
}
label.el-checkbox:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
}
</style>
</head>
<body>
<div id="power">
<div id="hacker-list">
<template>
<div>
<!-- -->
<template>
<el-row class="treeTitle">
<el-col><span>模块</span></el-col>
<el-col><span>可查阅所有数据</span></el-col>
<!-- <el-col><span>创建</span></el-col> -->
<el-col><span>可修改可看的数据</span></el-col>
<!-- <el-col><span>删除</span></el-col> -->
</el-row>
</template>
<!-- :expand-on-click-node="false" -->
<el-tree class="filter-tree" :data="tableData" node-key="id" :props="defaultProps" ref="tree">
<span class="custom-tree-node" slot-scope="{ node, data }">
<el-row type="flex">
<el-col>
<template v-if="data.child.length==0">
<span class="openurl" @click="openurl(data.menuin)" v-text='data.name.split("(")[0]'></span>
</template>
<template v-else>
<span v-text='data.name.split("(")[0]'></span>
</template>
</el-col>
<el-col @click.stop.native="return false">
<template v-if="canCilck">
<el-checkbox v-model="checked.read[data.id]" :ids="data.id" name="qxuserId_read" @change="selectTr('1',node.data)" :key="data.id"></el-checkbox>
</template>
<template v-else>
<el-checkbox v-model="checked.read[data.id]" :ids="data.id" name="qxuserId_read" disabled @change="selectTr('1',node.data)" :key="data.id"></el-checkbox>
</template>
</el-col>
<el-col @click.stop.native='return false'>
<template v-if="canCilck">
<el-checkbox v-model="checked.edit[data.id]" :ids="data.id" name="qxuserId_edit" @change="selectTr('3',node.data)" :key="data.id"></el-checkbox>
</template>
<template v-else>
<el-checkbox v-model="checked.edit[data.id]" :ids="data.id" name="qxuserId_edit" disabled @change="selectTr('3',node.data)" :key="data.id"></el-checkbox>
</template>
</el-col>
</el-row>
</span>
</el-tree>
</div>
</template>
</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/elementui.js"></script>
<script>
var vue = new Vue({
el: "#power",
data: {
tableData: '',
checked: {
"read": {},
"creat": {},
"edit": {},
"delet": {}
},
defaultProps: {
children: 'child',
label: 'name'
},
canCilck: true,
},
created: function() {
this.getMenu()
},
mounted: function() {
var that = this
},
methods: {
getMenu: function() {
var that = this
var res=[
{
"id": "5d15c6ac209c716c5f7a1dac",
"meunId": "5d15c6ac209c716c5f7a1dac",
"name": "一级菜单1",
"isFlow": false,
"child": [
{
"id": "5d15c6ac209c716c5f7a1dad",
"name": "默认模块",
"menuinName": "提醒消息",
"isFlow": false,
"child": [
{
"id": "5ebcc55b209c00edbb551716",
"name": "默认的登记模块",
"menuin": "test.morendedengjimokuai",
"menuinName": "默认的登记模块",
"isFlow": false,
"child": []
},
{
"id": "5ebcc50e209c00edbb551715",
"name": "默认工作流",
"menuin": "sjmx.morengongzuoliu",
"menuinName": "默认工作流",
"isFlow": true,
"child": []
},
{
"id": "611e0e93209c9db7b0807268",
"name": "项目立项(xmxx.xiangmulixiang)",
"menuin": "xmxx.xiangmulixiang",
"menuinName": "项目立项(xmxx.xiangmulixiang)",
"isFlow": true,
"child": []
}
]
},
{
"id": "5f20fd44209cd6c9fc9174b7",
"name": "行政",
"isFlow": false,
"child": [
{
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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