el-tree里面选择复选框的时候同时选中文字

上面说的意思如下图所示,即在选择复选框的时候当前的节点也进行高亮展示

 先贴代码:

<template>
    <div>
        <el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current
            :props="defaultProps" @check="check" @node-click="nodeClick">
        </el-tree>
    </div>
</template>
<script>
export default {
    data() {
        return {
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        };
    },
    methods: {
        check(node) {
            console.log(this.$refs)
            this.$refs.tree.setCurrentKey(node.id)
        },
    },
};
</script>

这是官网最简单的代码,旨在用最少的代码解决问题。说到这里应该结束了,但是如果有兴趣的话可以看看思路:

当时的需求是已经做了一个复选框并且只能单选一个子节点,重要的是那个复选框的id要传过去,现在用户的需求是把复选框去掉,并且选择的时候是高亮效果。当时官网已经有了highlight-current这个高亮属性,但是是需要点击才可显示高亮效果,于是我想着在点击复选框的时候拿到当前节点id模拟用户点击效果,即可展示高亮(实话说这个思路其实没什么问题,但是click事件并没有真正的模拟出用户点击,只是用了回调函数,网上找了很多也没找到,我是菜鸡),后面在官网找到了这个el-tree方法setCurrentKey,可以看看官网对他的解释:

 注意里面提到了高亮效果,这不就是我们需要的吗,直接根据节点id进行高亮设置不就行了,哪还需要模拟用户点击操作那么麻烦,于是就在选择框的check函数里面先拿到当前节点id,然后执行setCurrentKey函数并且将拿到的id传入进去就欧克了。

每日箴言:

“山木自寇也,膏火自煎也。人皆知有用之用,而莫之无用之用也”

猜你喜欢

转载自blog.csdn.net/m0_61625235/article/details/131110408
今日推荐