<template>
|
<Popup
|
ref="pop"
|
:title="title"
|
@close="close"
|
showBtn="true"
|
@yes="sendData"
|
@cancel="close(true)"
|
>
|
<div class="treeContainer">
|
<el-tree
|
ref="tree"
|
show-checkbox
|
:data="treeData"
|
node-key="id"
|
default-expand-all
|
:render-content="renderContent"
|
:expand-on-click-node="false"
|
:auto-expand-parent="false"
|
:default-checked-keys="defaultChecked"
|
>
|
</el-tree>
|
</div>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup";
|
import baseVuex from "@mixin/baseVuex";
|
export default {
|
name: "tree",
|
components: { Popup },
|
mixins: [baseVuex],
|
data() {
|
return {
|
isOpen: false,
|
title: "展示数据选取",
|
actionType: "",
|
defaultChecked: [],
|
isUpdate: false,
|
};
|
},
|
methods: {
|
open(actionType, defaultChecked = [], isUpdate = false) {
|
this.isUpdate = isUpdate;
|
this.defaultChecked = defaultChecked;
|
this.actionType = actionType;
|
this.$refs.pop.open();
|
this.isOpen = true;
|
},
|
close(isCancel) {
|
Object.assign(this.$data, this.$options.data());
|
if (isCancel) {
|
this.$refs.pop.close();
|
}
|
this.isOpen = false;
|
},
|
// 完成选择，传递数据
|
sendData() {
|
if (this.isUpdate) {
|
this.$emit("updateData", this.$refs.tree.getCheckedKeys());
|
this.close(true);
|
return;
|
}
|
this.$emit("success", this.$refs.tree.getCheckedKeys(), this.actionType);
|
this.close(true);
|
},
|
// 渲染
|
renderContent(h, { node, data }) {
|
return (
|
<span class="custom-tree-node">
|
<span>
|
<i class={data.children ? "el-icon-folder" : ""}></i>
|
{data.name}
|
</span>
|
</span>
|
);
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.treeContainer {
|
max-height: 500px;
|
overflow-y: auto;
|
overflow-x: hidden;
|
&::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 8px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 8px;
|
scrollbar-arrow-color: red;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
background: #797979;
|
scrollbar-arrow-color: red;
|
}
|
|
&::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
.el-tree {
|
background: transparent;
|
color: #fff;
|
}
|
|
/deep/ .el-tree-node__content:hover {
|
background-color: rgba(245, 247, 250, 0.2);
|
}
|
|
/deep/ .el-tree-node:focus > .el-tree-node__content {
|
background-color: rgba(245, 247, 250, 0.2);
|
}
|
|
/deep/ .custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
padding-right: 10px;
|
|
i {
|
margin-right: 5px;
|
}
|
}
|
}
|
.btnContainer {
|
margin-top: 10px;
|
display: flex;
|
justify-content: space-evenly;
|
}
|
</style>
|
