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传入进去就欧克了。

每日箴言:

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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值