When selecting the check box in el-tree, select the text at the same time

The meaning of the above is shown in the figure below, that is, the current node is also highlighted when the check box is selected

 Paste the code first:

<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>

This is the simplest code on the official website, aiming to solve the problem with the least amount of code. It should be over here, but if you are interested, you can take a look at the ideas:

The demand at that time was that a check box had already been made and only one child node could be single-selected. The important thing was that the id of the check box should be passed on. Now the user's demand is to remove the check box and select it with a high bright effect. At that time, the official website already had the highlight-current attribute, but it needs to be clicked to display the highlight effect, so I thought about getting the current node id to simulate the user's click effect when clicking the check box, and then display the highlight (To be honest, there is nothing wrong with this idea, but the click event does not really simulate the user's click, it just uses a callback function. I searched a lot on the Internet and couldn't find it. I am a rookie.) Later, I found this el-tree on the official website For the method setCurrentKey, you can see the explanation on the official website:

 Note that the highlight effect is mentioned in it. Isn’t this what we need? It’s not enough to set the highlight directly according to the node id. It’s so troublesome to simulate the user’s click operation, so I first get it in the check function of the selection box The current node id, then execute the setCurrentKey function and pass in the obtained id to OK.

Daily Proverbs:

"Mountains and trees are invaded by themselves, and the fire is self-destroyed. Everyone knows what is useful, but there is no such thing as useless."