elementplus el-tree 当有子元素时点击父元素不会选中且子元素不会失去高亮

122 阅读1分钟

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: 代码纯属记录工作中遇到的问题或者组件