资讯详情

tree组件自定义封装

自定义展示形式如下

全部代码如下：

<template><div class="treeBox"><el-treeshow-checkbox:check-strictly="true"class="tree":data="treeData"node-key="id"ref="tree":props="defaultProps":filter-node-method="filterNode"@check="chooseTree"style="width: 100%"></el-tree></div></template><script>export default {name: "twoMap",components: {},props: {treeData:{type:Array,default:()=>[]}},data() {return {defaultProps: {children: "children",label: "label",},filterText:''}},methods: {filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},chooseTree(data,checkedNodes){this.$emit('chooseTree',data)},},mounted(){},}
</script>
<style lang="scss" scoped>/*当鼠标点击后,再点击空白地方,节点失去焦点时显示的背景色*/::v-deep.el-tree-node.is-current> .el-tree-node__content.el-tree-node__label {/*background-color: rgba(68, 133, 245, 0.64) !important;*//*border-radius: 10px 0px 0px 10px;*/}/*当鼠标移动时,节点显示的背景色*/::v-deep .el-tree-node__content:hover {// background-color: #66b1ff87 !important;}// 动态切换可视化页面tree::v-deep .el-tree-node__content:hover .el-tree-node__expand-icon.is-leaf {color: transparent;}::v-deep .mytree {.el-tree > .el-tree-node:after {border-top: none;}.el-tree-node {position: relative;padding-left: 16px;}//节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉.el-tree-node__expand-icon.is-leaf {display: none;}.el-tree-node__children {padding-left: 16px;}.el-tree > .el-tree-node:before {border-left: none;}.el-tree > .el-tree-node:after {border-top: none;}.el-tree-node:before {content: "";left: -4px;position: absolute;right: auto;border-width: 1px;}.el-tree-node:after {content: "";left: -4px;position: absolute;right: auto;border-width: 1px;}.el-tree-node:before {border-left: 1px dashed #4386c6;bottom: 0px;height: 100%;top: -26px;width: 1px;}}.el-tree {background: none !important;}::v-deep .el-tree > .el-tree-node:first-child {padding-top: 0;}// 树结构样式//一级节点选择器::v-deep.el-tree> .el-tree-node> .el-tree-node__content.el-tree-node__label {background-color: transparent !important;border-radius: 0 !important;}::v-deep .el-tree > .el-tree-node > .el-tree-node__content {box-shadow: 0 0 30px #37a1fc inset;border-radius: 6px;border: 1px solid #37a1fc;color: #ffffff;// margin-top: 20px;height: 49px;}::v-deep.el-tree> .el-tree-node> .el-tree-node__content> .el-icon-caret-right {background: url("~@/assets/images/homeInfo/onetree.png");background-size: 100% 100%;width: 26.5px;height: 26.5px;}> .el-icon-caret-right::before {display: none;}::v-deep.el-tree> .el-tree-node> .el-tree-node__content> .el-icon-caret-right::before {display: none;}//二级节点选择器::v-deep.el-tree> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__content {color: #ffffff;// margin-top: 23px;line-height: 40px;}//二级节点选择器::v-deep.el-tree> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__content> .el-icon-caret-right {background: url("~@/assets/images/homeInfo/twoTree.png");background-size: 100% 100%;width: 26.5px;height: 26.5px;}//二级节点选择器::v-deep.el-tree> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__content> .el-icon-caret-right:before {content: "";}//二级节点选择器::v-deep.el-tree> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__content {font-weight: 500;// margin-bottom: 22px;}//三级节点选择器::v-deep.el-tree> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__content> .el-icon-caret-right {/*background: url("~@/assets/images/homeInfo/threeTree.png");*/background: url("~@/assets/images/homeInfo/twoTree.png");background-size: 100% 100%;width: 26.5px;height: 26.5px;/*margin-right: 0;*//*padding: 1px;*//*visibility: hidden;*/}::v-deep.el-tree> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__content> .el-icon-caret-right:before {content: "";}/*> .el-tree-node__content {*//*color: #ffffff;*//*// margin-top: 23px;*//*font-weight: 400;*//*font-size: 16px;*//*}*//*四级节点选择器*/::v-deep.el-tree> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__content> .el-icon-caret-right {background: url("~@/assets/images/homeInfo/twoTree.png");background-size: 100% 100%;width: 26.5px;height: 26.5px;}::v-deep.el-tree> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__content> .el-icon-caret-right:before {content: "";}/*  五级节点选择器*/::v-deep.el-tree> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__content> .el-icon-caret-right {/*background: url("~@/assets/images/homeInfo/twoTree.png");*//*background-size: 100% 100%;*//*width: 26.5px;*//*height: 26.5px;*/background: transparent !important;}::v-deep.el-tree> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__children> .el-tree-node> .el-tree-node__content> .el-icon-caret-right:before {content: "";}// 竖线::v-deep .el-tree-node__content {padding: 0 !important;}::v-deep .el-tree-node {position: relative;padding: 10px 0 0 16px;}::v-deep .el-tree-node__children {padding-left: 16px;}// 竖线::v-deep .el-tree-node::before {content: "";height: 100% !important;width: 1px;position: absolute;left: 23px;top: -13px;border-width: 1px;border-left: 1px solid #dedee0;opacity: 0.6;}::v-deep .el-tree-node:last-child::before {height: 45px !important;}::v-deep .el-tree-node:focus > .el-tree-node__content {background: none;}// 横线::v-deep .el-tree-node::after {content: "";width: 20px;height: 20px;position: absolute;left: 23px;top: 32px;border-width: 1px;border-top: 1px solid #dedee0;opacity: 0.6;}// 节点间距::v-deep .el-tree-node {// margin-bottom: 20px;}::v-deep > .el-tree-node::after {border-top: none;}::v-deep > .el-tree-node::before {border-left: none;}::v-deep .el-tree-node__expand-icon {font-size: 16px;}// /deep/ .is-leaf {//   // display: none;// }::v-deep .el-tree-node__label {font-size: 16px !important;line-height: 26px;padding-left: 6px;width: 100%;overflow: hidden;white-space: inherit;text-overflow: ellipsis;color: #ffffff;}::v-deep .el-tree-node__content > .el-tree-node__expand-icon {background: #068687;width: 26.5px;margin: 0 0 0 25px;}::v-deep .el-icon-caret-right:before {}::v-deep .el-tree-node:focus > .el-tree-node__content {// background: none; //背景色}::v-deep .el-tree-node__content {&:hover {background: none;}}::v-deep .el-tree-node:focus-within > .el-tree-node__content {background-color: none !important;// z-index: 999;}/* 树状图==》 选择框*/::v-deep .el-checkbox__inner{width: 23px ;height: 23px ;background: rgba(35,133,197,0.3);border: 1px solid #3ABCFF ;line-height: 23px ;margin-left: 5px ;}/*树状图，选中后，背景色的改变*/::v-deep .el-checkbox__input.is-checked .el-checkbox__inner, .choose_area .el-checkbox__input.is-indeterminate .el-checkbox__inner{background: #2385C5;border: 1px solid #3ABCFF;}/*树状图选中后，对钩的样式*/::v-deep .el-checkbox__inner::after{height: 12px !important;width: 5px !important;left: 8px;}
</style>