vue.js elementui 前端 vue2+element UI，根据组织选择人员弹窗的封装！（组织为树结构）

弹窗截图

 弹窗功能代码：

 相关CSS样式代码

.fx-dialog {

.flex-item {

display: flex;

span.link {

width: 40px;

display: inline-block;

text-align: center;

line-height: 40px;

height: 40px;

color: #333333;

font-weight: 600;

}

& > div {

flex: 1;

//padding: 15px 12px;

border: solid 1px #e5e5e5;

/* &:not(:last-child) {

margin-right: 50px;

} */

&.column {

height: 400px;

overflow: auto;

&.moreHeight{

height: 500px;

}

& > div > label {

&.el-checkbox {

padding-left: 20px;

}

}

& > span {

color: #333333;

width: 100%;

display: block;

line-height: 40px;

padding-left: 18px;

//padding-bottom: 10px;

border-bottom: 1px solid #eaeaea;

font-weight: 600;

i {

color: #3e96f0;

display: inline-block;

margin-right: 10px;

height: 15px;

width: 15px;

&.one {

background: url('../assets/next-task.png') center center no-repeat;

background-size: 100% 100%;

}

&.two {

background: url('../assets/next-user.png') center center no-repeat;

background-size: 100% 100%;

}

}

}

.el-checkbox-group,

.el-radio-group {

padding-left: 20px;

display: flex;

}

.el-checkbox-group{

flex-wrap: wrap;

& > label {

width: 40%;

}

}

.el-radio-group {

display: flex;

flex-direction: column;

}

.el-radio .el-radio__input.is-checked + .el-radio__label {

background-color: #e2f0fd;

}

.el-radio .el-radio__label {

padding: 0 8px 0 8px;

margin-left: 10px;

}

.el-tree,

.el-checkbox-group,

.el-radio-group {

margin-top: 5px;

}

}

}

}

.item {

display: flex;

line-height: 45px;

&:not(:last-child),

&.last {

margin-top: 10px;

}

span.tit {

width: 100px;

}

label {

line-height: 45px;

}

.el-date-editor input,

input,

.el-input__inner {

height: 38px !important;

line-height: 38px;

}

}

}

弹窗组件相关的代码已经放在上面了，代码也写了相应的注释。

组件的样式布局都可以优化，例如：可以去除最下面的表格，改为3列，最右侧展示已勾选人员。

但是目前想要的功能已经实现，等我有空再来优化优化弹窗样式吧！

精彩链接

 您阅读本篇文章共花了：