实现页面组件
image.png
注意点
1、el-option 标签要加上v-show="index == 0"，不然回显框不显示名称
2、 el-option 内容的<div class="dept-member" v-if="index == 0"> 要加上v-if 不然会加载多次的load函数
3、当变成多选框时，TypeError: this.$refs.tree.getCheckedNodes is not a function会报错。因为是for循环出来的所以会报错
<template>
<div>
<el-select
v-model="userList"
clearable
placeholder="请选择"
multiple
value-key="id"
ref="selectUserList"
popper-class="depart-member-mulitiple-select"
>
<el-option
:key="item.id"
:label="item.name"
:value="item"
disabled
v-for="(item, index) in options"
v-show="index == 0"
>
<div class="dept-member" v-if="index == 0">
<div class="dept-member-content">
<div class="select-list">
<div class="select-list-header">
<el-input
class="search"
placeholder="请输入内容"
prefix-icon="el-icon-search"
v-model="filterText"
clearable
@change="getFilter"
>
</el-input>
</div>
<div class="select-list-content">
<el-tree
:data="treeData"
:load="getTree"
ref="tree"
node-key="userId"
lazy
:check-strictly="true"
show-checkbox
:props="defaultProps"
@node-click="handleNodeClick"
@node-expand="handleNodeClick"
@check-change="handleCheckChange"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<svg
v-if="data.disabled"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
xmlns:xlink="http://www.w3.org/1999/xlink"
class="file-icon"
>
<path
d="M157.3 158.7h319.1c22.5 0 43 12.7 53 32.6l42.9 85.4h296.4c32.7 0 59.3 26.4 59.3 59v472c0 32.5-26.6 59-59.3 59H157.3c-32.7 0-59.3-26.4-59.3-59v-590c0-32.5 26.6-59 59.3-59z"
fill="#009cff"
></path>
</svg>
<el-radio
v-if="!data.disabled"
@change="changeOne"
v-model="radio"
:label="data"
></el-radio>
<span>{{ data.name }}</span>
</span>
</el-tree>
</div>
</div>
<div class="select-has-been">
<div class="select-has-been-header">
<span> 已选择的成员</span>
<ul>
<li v-for="(item, index) in chooseMan" :key="index">
<div
id="tree-active-XieSiQiang"
data-id="35"
data-parentid=""
data-department="[5]"
title="谢思强"
class=""
style="display: flex; height: 36px; align-items: center"
>
<span class="ic">{{
item.name || item.businessName
}}</span>
</div>
<i class="el-icon-close" @click="deleOneChoose(item)"></i>
</li>
</ul>
</div>
</div>
</div>
<div class="handle">
<div class="handle-selected"></div>
<div class="btn-group">
<button
data-v-e92afaea=""
data-v-79a6a809=""
type="button"
class="el-button mk-button mk-button-biz el-button--default"
style="width: 56px; height: 24px; font-size: 12px; padding: 0px"
@click="cansubmitSelect"
>
<!----><!----><span> 取消 </span>
</button>
<button
data-v-e92afaea=""
data-v-79a6a809=""
type="button"
@click="submitSelect"
class="
el-button
mk-button mk-button-biz
confirm
el-button--primary
"
style="width: 56px; height: 24px; font-size: 12px; padding: 0px"
>
<!----><!----><span> 确认 </span>
</button>
</div>
</div>
</div>
</el-option>
</el-select>
</div>
</template>
<script>
// 单人活码
// :selectMan="ChoosePeople"
import * as api from "@/api/organization";
export default {
data() {
return {
filterText: "",
query: {
pageNum: 1,
pageSize: 100000,
isActivate: "",
department: "",
},
originData: [],
flag: false,
treeData: [],
defaultProps: {
children: "children",
label: "label",
isLeaf: "leaf",
},
chooseMan: [{}],
radio: "",
userList:'',
options: [
{
name: "JDQ",
alias: "",
userId: "15665400628",
gender: 1,
mobile: "15665400628",
email: "",
department: ["1"],
position: "",
isLeaderInDept: ["0"],
enable: 1,
telephone: "",
isActivate: 4,
}
],
};
},
props: {
chooseman:{
type:Array,
default: () => []
}
},
created() {
this.chooseMan = this.chooseman //回显数据
},
watch: {
chooseman: {
handler(newVal, oldVal) {
console.log(44, newVal);
// this.chooseMan = newVal;
},
deep: true,
},
// filterText(val) {
// // this.$refs.tree.filter(val);
// },
visible(val) {
if (val) {
console.log(55);
}
},
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
getTree(node, resolve) {
if (this.flag) {
this.getList(node, resolve);
return;
}
console.log(3333)
api.getTree().then(({ data }) => {
data.map((item) => {
return (item.disabled = true);
});
this.originData = data;
this.treeData = this.handleTree(data);
this.flag = true;
});
},
getList(node, resolve) {
this.query.name = "";
this.query.department = node.data.id;
this.loading = true;
api
.getList(this.query)
.then(({ rows, total }) => {
rows.map((item) => {
item.id = item.userId;
item.businessId = item.userId;
item.businessName = item.name;
return (item.leaf = true);
});
// this.originData //全部的数据
this.originData = this.originData.concat(rows);
if (this.chooseman.length !== 0) {
let selects = this.originData.filter((item, index) => {
return item.id == this.chooseman[0].id;
});
this.radio = selects[0]; //回显加载的数据
}
let data =
(node.data.children && rows.concat(node.data.children)) || rows;
resolve(data);
})
.catch(() => {
this.loading = false;
});
},
getFilter() {
if (this.filterText == "") {
this.flag = false;
this.getTree();
return;
}
this.query.department = "";
this.originData = [];
this.query.name = this.filterText;
api
.getList(this.query)
.then(({ rows, total }) => {
rows.map((item) => {
item.id = item.userId;
item.businessId = item.userId;
item.businessName = item.name;
return (item.leaf = true);
});
// this.originData //全部的数据
this.originData = this.originData.concat(rows);
if (this.chooseman.length !== 0) {
let selects = this.originData.filter((item, index) => {
return item.id == this.chooseman[0].id;
});
this.radio = selects[0]; //回显加载的数据
// console.log(3333,this.radio)
}
this.treeData = this.handleTree(rows);
})
.catch(() => {
this.loading = false;
});
},
changeOne(one) {
this.chooseMan = [one];
},
handleNodeClick(data, node) {
this.query.department = data.id;
},
handleCheckChange(data, checked, indeterminate) {
this.chooseMan = this.$refs.tree.getCheckedNodes();
},
deleOneChoose(item) {
this.radio = "";
this.chooseMan.splice(this.chooseMan.indexOf(item), 1);
this.$refs.tree.setCheckedNodes(this.chooseMan);
},
cansubmitSelect() {
this.originData = this.originData.concat(this.chooseman);
this.$emit("selectMan", this.chooseman, this.originData);
},
submitSelect() {
this.$refs.selectUserList.blur();
this.userList = this.chooseMan;
// this.options = this.unique(this.originData) //会报错
this.options = this.options.concat(this.chooseMan)
console.log(3333,this.options)
this.$emit("selectMan", this.chooseMan);
},
},
};
</script>
<style lang="scss" scoped>
.dept-member ::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
}
.dept-member {
width: 450px;
height: 386px;
border-radius: 4px;
background-color: #fff;
position: relative;
z-index: 2002;
cursor: pointer;
.search-type {
width: 100%;
height: 44px;
padding: 0 12px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
box-sizing: border-box;
border-bottom: 1px solid #f0f0f0;
/deep/ .el-radio-button__inner {
font-size: 13px;
padding: 4px 8px !important;
}
}
.dept-member-content {
display: flex;
width: 100%;
height: 342px;
box-sizing: border-box;
border-bottom: 1px solid #f5f5f5;
.select-list {
width: 240px;
border-right: 1px solid #f5f5f5;
.select-list-header {
display: flex;
height: 44px;
box-sizing: border-box;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
border-bottom: 1px solid #f5f5f5;
.search {
width: calc(100% - 24px);
height: 32px;
}
}
.select-list-content {
width: 100%;
height: calc(100% - 44px);
overflow: auto;
box-sizing: border-box;
border-bottom: 1px solid #f5f5f5;
/deep/.el-checkbox.is-disabled {
display: none !important;
}
/deep/ .custom-tree-node {
display: flex;
-ms-flex-align: center;
align-items: center;
.file-icon {
color: #8f9fb3;
font-size: 14px;
margin-right: 2px;
}
}
}
}
.select-has-been {
width: 210px;
.select-has-been-header {
height: 44px;
box-sizing: border-box;
border-bottom: 1px solid #f5f5f5;
span {
color: #a1a1a1;
font-size: 13px;
line-height: 44px;
margin-left: 10px;
}
}
ul {
width: 100%;
height: 305px;
overflow-y: auto;
li {
&:hover {
background-color: rgb(247, 247, 247);
.el-icon-close {
color: rgb(64, 169, 253);
}
}
line-height: 36px;
font-size: 13px;
color: #595959;
padding: 0 10px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
span.ic {
margin-left: 14px;
width: 154px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 36px;
color: #262626;
}
.el-icon-close {
color: #888;
font-size: 14px;
cursor: pointer;
}
}
}
}
}
.handle {
height: 44px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
.handle-selected {
font-size: 12px;
color: #595959;
margin-left: 15px;
}
.btn-group {
.confirm {
margin-right: 10px;
}
}
}
}
.el-radio {
margin-right: 5px;
}
/deep/.el-radio__label {
display: none;
}
/deep/.el-tree-node__content > label.el-checkbox {
display: none;
}
.el-select-dropdown__item.is-disabled {
cursor: default !important;
// height: auto!important;
color: #c0c4cc;
padding: 0;
height: 430px;
max-height: inherit;
.tag-select-group {
padding: 10px 0 2px;
display: -ms-flexbox;
display: flex;
border-bottom: 1px dotted #f0f0f0;
.tag-name {
color: #666;
font-size: 13px;
line-height: 20px;
}
.tag-list {
margin-left: 34px;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
.tag-item {
height: 20px;
line-height: 20px;
padding: 0 8px;
margin: 0 8px 8px 0;
border-radius: 2px;
font-size: 12px;
background-color: #ebeff4;
color: #6b7b88;
cursor: pointer;
}
}
}
}
// 这个是选择员工
.depart-member-mulitiple-select {
.el-scrollbar {
background-color: #fff;
width: calc(100% + 2px);
height: 430px;
.el-select-dropdown__wrap {
height: 449px;
background-color: #fff;
max-height: inherit!important;
.el-select-dropdown__list {
padding: 0;
}
}
}
/deep/ .el-select-dropdown__item.is-disabled {
padding: 0;
height: 430px;
max-height: inherit;
}
}
</style>
以前的写法：
网友评论