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;}