tree组件_自定义类型
tree组件自定义封装
自定义展示形式如下
全部代码如下：
<template>
<div class="treeBox">
<el-tree
show-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;