vue+element-ui树形多级菜单选择效果代码-html代码-BFW代码库

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
    }
    ..........完整代码请登录后点击上方下载按钮下载查看