后端返的树形数据,本来不需要处理的
后来加了个条件,要根据登录人角色,隐藏本级登录人节点
<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
},
完成~~~~~~~