<template>
<el-container>
<el-main>
<jxudpAutoHeight type="default" :diff-height="60">
<div class="filterText">
<el-input v-model="filterText" placeholder="输入内容搜索"></el-input>
</div>
<el-tree
ref="tree"
:data="treeData"
:props="defaultProps"
node-key="id"
:filter-node-method="filterNode"
:default-checked-keys="treeCheckedData"
:default-expanded-keys="treeExpandData"
highlight-current
@node-click="handleNodeClick"
>
<p
slot-scope="{ node, data }"
class="custom-tree-node"
@mouseover="mouseOver($event)"
@mouseleave="mouseLeave($event)"
>
<span>{{ node.label }}</span>
<span class="btns">
<span v-if="isOperate" style="color: #488ef7">
<i
class="el-icon-circle-plus-outline"
title="新增"
@click.stop="handleOperateNode(data, node, 'add')"
>
</i>
<i
v-if="node.level !== 1"
class="el-icon-edit"
title="编辑"
@click.stop="handleOperateNode(data, node, 'edit')"
>
</i>
<i
v-if="node.level !== 1"
class="el-icon-delete"
title="删除"
@click.stop="handleOperateNode(data, node, 'delete')"
>
</i>
</span>
</span>
</p>
</el-tree>
</jxudpAutoHeight>
</el-main>
</el-container>
</template>
<script>
import projectSelectMix from 'iac/base/components/mixins/projectSelectMix.ts'
export default {
components: {},
mixins: [projectSelectMix],
props: {
isOperate: {
type: Boolean,
default: true
} //是否有编辑操作
},
data() {
return {
filterText: '',
defaultProps: {
children: 'children',
label: 'name'
},
treeData: [],
treeParams: {
// parentId: '10000',
projectId: '',
needDeviceRate: true,
isLazy: true,
allData: true
},
treeUrl: '/vplatbase/EnvironmentRangService/findUnitAndRangTree',
treeCheckedData: [],
treeExpandData: []
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val)
}
},
methods: {
// 电站切换
switchProject(projectId, data) {
this.treeParams.projectId = projectId
this.getTreeData()
},
// 获取树数据
getTreeData() {
this.$request({ method: 'get', url: this.treeUrl, params: this.treeParams }).then(res => {
if (this.tool.isSuccess(res)) {
this.treeData = res.data.datas
// 初始化的时候默认更新主节点id对应的table列表
let initId = 'null'
if (this.treeData?.length) {
initId = this.treeData[0].id
this.treeExpandData = [initId]
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(initId) // 默认选中节点第一个
})
this.$emit('initTree', initId)
} else {
this.$emit('initTree', '')
this.$emit('initList', '')
}
this.handleNodeClick({ id: initId })
}
})
},
// 点击树节点, 发送树节点id,驱动table列表数据变化
handleNodeClick(data, node, obj) {
if (!data) {
data = {}
}
data.projectId = this.treeParams.projectId
this.$emit('handleNodeClick', data, node, obj)
},
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
// 节点操作
handleOperateNode(data, node, type) {
this.$emit('handleOperateNode', data, node, type)
},
// 动态交互
mouseOver(e) {
if (this.getBtnSpan(e)) {
this.getBtnSpan(e).style.display = 'block'
}
},
mouseLeave(e) {
if (this.getBtnSpan(e)) {
this.getBtnSpan(e).style.display = 'none'
}
},
getBtnSpan(e) {
let btnsSpan = null
const btns = e.target.querySelectorAll('.btns')
if (btns.length <= 0) {
btnsSpan = e.target.closestReplenish('.custom-tree-node')
} else {
btnsSpan = btns[0]
}
return btnsSpan
}
}
}
</script>
<style lang="less" scoped>
.filterText {
padding: 10px;
}
.el-icon-edit {
margin: 0 5px !important;
}
.custom-tree-node {
width: 100%;
display: flex;
justify-content: space-between;
height: 30px;
line-height: 30px;
font-size: 14px;
position: relative;
}
.custom-tree-node .btns {
display: none;
margin-left: 4px;
position: absolute;
right: 10px;
top: 0;
// margin-right: 10px;
}
</style>
el-tree的封装
于 2023-11-30 10:13:39 首次发布