telement
<el-tree
:highlight-current="true"
ref="treeRef"
:data="treeData"
:filter-node-method="filterNode"
node-key="id"
:props="defaultProps"
@node-click="handleNodeClick"
/>
scritp setup
const defaultProps = {
children: 'children',
label: 'name',
class: function (data, node) {
if (data.children && data.children.length > 0) {
// data.disabled = true
return 'isChildren'
} else {
return false
}
}
}
// 过滤tree数据
const treeRef = ref()
watch(filterText, (val) => {
treeRef.value!.filter(val)
})
const filterNode = (value, data) => {
if (!value) return true
return data.name.includes(value)
}
const selectTreeNode = ref({})
const tableRef = ref()
// 点击tree节点
const handleNodeClick = async (data) => {
if (data.children && data.children.length > 0) {
console.log('3333333333', treeRef.value)
console.log('4444444', selectTreeNode.value)
treeRef.value.setCurrentKey(selectTreeNode.value.id)
return
} else {
selectTreeNode.value = data
console.log('选中的tree', JSON.stringify(data.parameterType))
console.log(data)
}
}
scss
.el-tree {
height: 600px;
overflow: auto;
background: transparent;
&.el-tree--highlight-current {
:deep(.el-tree-node) {
&.is-current {
& > .el-tree-node__content {
color: $jc-primary;
background: $jc-tabs-bg;
}
}
// 父节点点击选中取消样式
&.isChildren {
& > .el-tree-node__content {
color: $jc-text;
background: transparent;
}
}
}
}
}
ps: 代码纯属记录工作中遇到的问题或者组件