项目场景：
el-tree树形图组写成一个组件，并控制默认高亮
问题描述
el-tree树形图组写成一个组件，并控制默认高亮。上边存在搜索框和下拉框。能添加和删除
解决方案：
组件代码：
<template>
<div class="grid-content bg-purple">
<!-- 标题 -->
<div class="tab">{{ title }}</div>
<!-- input输入框 -->
<div v-if="showInput">
<el-input
style="width: 85%; margin-right: 15px"
v-model="resource"
size="small"
placeholder="搜索"
prefix-icon="el-icon-search"
></el-input>
<el-link :underline="false"
><i
v-if="!isMysql"
class="el-icon-folder-add"
style="font-size: 18px"
@click="addTree"
></i>
<el-popover
popper-class="popoverStyle"
placement="right"
width="100"
trigger="hover"
v-else
>
<div>
<p
class="mysqlP"
v-for="item in dict.type.dap_datasource_class"
:key="item.code"
@click="addTreeMysql(item.value)"
>
{{ item.label }}
</p>
</div>
<i
slot="reference"
class="el-icon-folder-add"
style="font-size: 18px"
></i>
</el-popover>
</el-link>
</div>
<!-- select 下拉框 -->
<div v-if="showSelect">
<el-select
style="width: 60% !important; margin-right: 15px"
v-model="selectVal"
size="small"
placeholder="请选择"
@change="getChange"
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<el-link :underline="false"
><i
class="el-icon-folder-add"
style="font-size: 18px"
@click="addTree"
></i>
</el-link>
</div>
<!-- el-tree 树形图 -->
<div :class="type == 1 ? 'treeBottom' : 'treeBottom2'">
<el-tree
:data="deptOptions"
:props="props"
node-key="id"
:default-expanded-keys="defaultExpandedKeys"
@node-click="handleNodeClick"
:filter-node-method="filterNode"
:current-node-key="highlightKey"
highlight-current
accordion
ref="testTree"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<!-- 每个节点的图标 -->
<div >
<span>
<i
v-if="Array.isArray(data.children) && data.children.length > 0"
style="margin-right: 10px"
class="el-icon-folder"
></i>
<i v-else style="margin-right: 10px" class="el-icon-tickets"></i>
{{ node.label }}</span
>
</div>
<!-- 更多操作 -->
<div
v-if="showMore"
class="tree_div"
:class="
checkId == data.id || checkId == data.value ? 'tree_checked' : ''
"
>
<el-dropdown
v-if="node.label != '任务分类' || node.label != '资源目录'"
>
<img src="@/assets/image/more.png" alt="" />
<el-dropdown-menu
slot="dropdown"
style="padding: 0 10px; color: #606266"
>
<div class="menu">
<div
v-if="isView"
class="caid"
style="font-size: 14px"
@click="viewTree(node)"
>
<i style="margin-right: 10px" class="el-icon-view"></i>查看
</div>
<div
v-if="isResource"
class="caid"
style="font-size: 14px"
@click="resTree(node)"
>
<i
style="margin-right: 10px"
class="el-icon-s-management"
></i
>资源
</div>
<div
class="caid"
style="font-size: 14px"
@click="editTree(node)"
>
<i style="margin-right: 10px" class="el-icon-edit"></i>编辑
</div>
<div
v-if="isSubordinate"
class="caid"
style="font-size: 14px"
@click="subordinate(node)"
>
<i style="margin-right: 10px" class="el-icon-folder-add"></i
>下级
</div>
<div
class="caid"
style="font-size: 14px; color: red"
@click="delTree(node)"
>
<i style="margin-right: 10px" class="el-icon-delete"></i
>删除
</div>
</div>
</el-dropdown-menu>
</el-dropdown>
</div>
</span>
</el-tree>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "",
},
type: {
type: String,
default: "1",
},
/* 搜索框显示 */
showInput: {
type: Boolean,
default: true,
},
/* 下拉框 */
showSelect: {
type: Boolean,
default: false,
},
/* 下拉框值 */
resourceSelect: {
type: String,
},
/* 下拉框选项的值 */
options: {
type: Array,
},
checkId: {
type: String,
default: "",
},
/* 树形图data */
deptOptions: {
type: Array,
default: [],
},
/* 默认展开节点的值 */
defaultExpandedKeys: {
type: Array,
},
/* tree型子级的格式 */
props: {
type: Object,
},
/* 显示增删改操作 */
showMore: {
type: Boolean,
default: true,
},
/* 下级跟添加切换 */
isSubordinate: {
type: Boolean,
default: true,
},
/* 查看 */
isView: {
type: Boolean,
default: false,
},
/* 资源按钮 */
isResource: {
type: Boolean,
default: false,
},
/* 默认高亮 */
highlightKey: {
type: [String, Number],
default: "",
},
/* 数据库新增 */
isMysql: {
type: Boolean,
default: false,
},
/* 数据库 图标显示 */
isMysqlIcon: {
type: Boolean,
default: false,
},
},
dicts: ["dap_datasource_class"],
data() {
return {
resource: "",
selectVal: this.resourceSelect,
};
},
watch: {
// 根据目录查找数据
resource(val) {
this.$refs.testTree.filter(val);
},
// 高亮操作
highlightKey(val) {
this.$nextTick(() => {
this.$refs["testTree"].setCurrentKey(val);
});
},
},
methods: {
// 节点筛选
filterNode(value, data) {
if (!value) return true;
var res = "";
if (data.name) {
res = data.name.indexOf(value) !== -1;
return res;
}
// console.log("data.label",data.label);
if (data.label) {
res = data.label.indexOf(value) !== -1;
return res;
}
},
// 下拉框改变值
getChange(id) {
this.$emit("selectChange", id);
},
// 新增
addTree() {
this.$emit("addTree");
},
// 资源
resTree(data) {
this.$emit("resTree", data);
},
// 节点点击
handleNodeClick(data, node, component) {
this.$emit("nodeClick", data, node, component);
},
// 修改
editTree(data) {
this.$emit("editTree", data);
},
// 下级
subordinate(data) {
this.$emit("subordinate", data);
},
// 删除
delTree(data) {
this.$emit("delTree", data);
},
// 查看
viewTree(data) {
this.$emit("viewTree", data);
},
/* 数据源添加 */
addTreeMysql(val) {
this.$emit("mysqlVal", val);
},
},
};
</script>
<style lang="scss" scoped>
.treeBottom {
margin-top: 15px;
height: calc(100vh - 220px);
overflow: hidden;
overflow-y: auto;
font-size: 14px;
}
.treeBottom2 {
margin-top: 15px;
height: calc(100vh - 250px);
overflow: hidden;
overflow-y: auto;
font-size: 14px;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.custom-tree-node {
&:hover .tree_div {
display: block;
}
}
.tree_div {
width: 10px;
display: none;
img {
height: 12px;
}
}
.tree_checked {
display: block;
}
.caid {
text-align: center;
height: 20px;
line-height: 20px;
margin: 10px 5px;
cursor: pointer;
&:hover {
background-color: #edf6ff;
}
}
::v-deep #el-popover {
min-width: 80px !important;
}
.mysqlP {
cursor: pointer;
margin: 0px;
padding: 5px;
&:hover {
background-color: #edf6ff;
}
}
</style>
<style lang="scss">
.el-popover.popoverStyle {
height: 158px;
overflow: auto;
}
.tab {
font-size: 16px;
padding-bottom: 10px;
font-weight: 800;
}
</style>
引用代码：
我在main.js里面引用全局。
根据自己需求，显示想要的条件
<tree-value
ref="treeValue"
:deptOptions="deptOptions"
:props="props"
:showInput="true"
:showSelect="false"
:isSubordinate="false"
:highlightKey="highlightKey"
type="2"
@nodeClick="handleNodeClick"
@addTree="addTree"
@delTree="delTree"
@editTree="editTree"
></tree-value>