vue-treeselect树形下拉,根据登录人角色,隐藏本级登录人节点(树形数据,删除指定节点)

后端返的树形数据,本来不需要处理的
后来加了个条件,要根据登录人角色,隐藏本级登录人节点

  <TreeSelect
                            ref="treeselect"
                            v-model="form.outUnitCode"
                            :options="deptOptions"
                            clearable
                            :matchKeys="['name', 'code']"
                            no-options-text="暂无可用选项"
                            no-results-text="没有匹配的搜索结构"
                            placeholder="请选择调出单位名称"
                            style="width: 200px"
                            :normalizer="deptnormalizer"
                            :disable-branch-nodes="true"
                            @select="node => treeHandleSelect(node)"
                       
                          >
                            <div slot="option-label" slot-scope="{ node }" :style="{ marginLeft: !node.raw.children ? '16px' : '0' }">
                              [{{ node.raw.code }}]{{ node.raw.label }}
                            </div>
                            <div slot="value-label" slot-scope="{ node }">{{ node.raw.code ? `[${node.raw.code}]` : '' }}{{ node.raw.label }}</div>
                          </TreeSelect>

首先,treeselect绑的值是code,所以要先获取到当前登录人的code

一般登录人的信息,比如:手机号、姓名、code、单位、地址等都是存放在vuex中,通过在vuex的actions中异步调用接口,存放信息。

可以直接在我们需要的页面中,在created或mounted中通过this.$store.state点出需要的字段名

或者 this.$store.dispatch(‘GetInfo’).then(res => {})
或者import { mapGetters } from ‘vuex’
在methods中 …mapGetters([‘roles’]),
在data中使用,举例:isCommon: !!this.roles().find(item => item.roleKey === ‘admin’),

我在created中拿到登录人信息

sameLevel: '',
 this.sameLevel = this.$store.state.user.deptCode

在获取树数据的地方处理一下数据,定义一个方法处理数据

  this.forfn(this.deptOptions, this.sameLevel)

把数据源和当前登录人code传进去,先循环外层,如果找到了就删除,如果没有找到就走else,如果children有长度,过滤children所有项,返回不是那一项的剩下其他项。

 forfn(arr, key) {
      if (arr && arr.length > 0) {
        for (let i = arr.length - 1; i >= 0; i--) {
          if (arr[i].code == key) {
            arr.splice(i, 1)
            console.log(arr, '1')
            // return
          } else {
            if (arr[i].children && arr[i].children.length > 0) {
              arr[i].children = arr[i].children.filter(v => {
                return v.code != key
              })
            }
          }
        }
      }
      return arr
    },

完成~~~~~~~

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值