移动端vs-tree组件特别需求的使用

最近vue项目需要个移动端的tree,需求比较奇葩,所以找了半天比较人性能自定义的tree组件,最后发现vs-tree自定义还可以,但是用的人比较少,缺陷还待完善
先放上原文档github vs-tree点这里大家可以照着看

我的需求是父子组件不关联,并实现全选控制,效果图如下

在这里插入图片描述
图1: 这是只选择上级部门的选中状态,已经是取消父子关联了
在这里插入图片描述
图2: 这是全选部门效果.

无效方法:(都是失败方式,这里就不放代码了)

思路(1):

原本我是想当我点击全选的时候控制打开父子关联并实现选中最上级父级状态.也尝试过,但无法实现, 原因是关联效果只在初始化下生效,第二次改变无效,

思路(2):
由于第二次改变无法生效,于是我更改方式,直接初始化就引用两个vs-tree组件,一个关联父子关系, 一个不关联父子关系,然后通过变量来控制展示哪一个,并选中最上级父级状态, 但是无法用ref同时控制两个tree的选中状态,所以导致混乱,也无法实现, (有空的小伙伴可以自己尝试,原因我也不太确定)

有效方法:

              <vs-tree
                ref="vsTree"
                :async="true"
                :data="vsTreeData"
                :showCheckbox="true"
                :checkboxType="{ Y: '', N: '' }"
                @change="vsTreeChange"
                :expandLevel="-1"
              ></vs-tree>
              <div class="confirmBox">
                <van-checkbox
                  v-model="sel
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值