elementui树形多级菜单单选与多选全选效果代码

代码语言:html

所属分类:表单美化

代码描述:elementui结合jquery实现一个树形多级菜单单选与多选全选效果代码,适合后台多级栏目或权限设置选择。

代码标签: element 菜单 选择

下面为部分代码预览,完整代码请点击下载或在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">
<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/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/element-ui.2.15.1.js"></script>
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>
<script >
var responsejson= [
    {
        "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": [
                    {
                        "id": "611754a2209ca407e1fe0064",
                        "name": "基础信息",
                        "isFlow": false,
                        "child": [
                            {
                                "id": "611754a2209ca407e1fe0065",
                                "name": "clh客户",
                                "menuin": "sjmx.clhkehu",
                                "menuinName": "clh客户",
                                "isFlow": false,
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0