vue2 a-tree-select树形结构-懒加载无限子级---笔记
实现效果
思维导图
HTML代码:treeData是绑定的数组,onLoadData是懒加载函数
-
<a-tree-select
-
style="width: 100%; margin-left: 20px"
-
tree-data-simple-mode
-
multiple
-
labelInValue
-
placeholder="请选择…"
-
v-decorator="['leadersStr', { rules: [{ required: true, message: '请选择…' }] }]"
-
:tree-data="treeData"
-
:disabled="readOnly"
-
:load-data="onLoadData"
-
/>
js代码部分,接口返回的数据是数组包裹对象的形式,前端需要组装
官网中的isLeaf是叶子节点,open为true时,说明节点下有数据,就不是叶子节点,isLeaf要取反
注: 这里兼顾到两种情况:
1. pId和id相同导致数据挂不上页面
2. id和id之间相同(机构id和人员id相同)也会导致挂不上去
要保持value和id的唯一性,所以加一个随机数,重新组装数据,value=random '-' value
页面初始化-请求接口数据
-
/* 获取带队领导姓名列表 */
-
async getLaderOrg(orgId = '111111111') {
-
let res = await findLeaderForOrg(orgId)
-
if(res.success && res.body.length > 0) {
-
this.treeData = res.body.map( v => {
-
const random = Math.random().toString(36).substring(2, 6);
-
/* 如果是人员,匹配接口数据,是否有已选中 */
-
if(v.type == '2') {
-
this.dealWithInitLeaders(v, random)
-
}
-
return {
-
id: random '/' v.sid,
-
pId: null,
-
value: random '-' v.sid,
-
title: v.title,
-
selectable: v.type == '2',
-
isLeaf: !v.open && v.type == '2',
-
disabled: v.type == '1'
-
}
-
})
-
}
-
},
懒加载部分:遍历数组最外层,
-
/* 领导带队检查懒加载 */
-
async onLoadData(treeNode) {
-
return new Promise(resolve => {
-
const { value, isLeaf } = treeNode
-
this.genTreeNode(value, isLeaf)
-
resolve()
-
});
-
},
-
-
// 树加载
-
async genTreeNode(key, isLeaf = false) {
-
var arr = []
-
/* key是拼接后的数据,需要还原回接口返回的形势,截断一下 */
-
await findLeaderForOrg(key.split('/')[1]).then( res => {
-
if(res.success && res.body.length > 0 ) {
-
res.body.map( item => {
-
const random = Math.random().toString(36).substring(2, 6);
-
/* 回显 */
-
if(item.type == '2') {
-
this.dealWithInitLeaders(item, random)
-
}
-
let params = {
-
id: random '/' item.sid,
-
pId: key,
-
value: random '-' item.sid,
-
title: item.title,
-
isLeaf: !item.open && item.type == '2',
-
selectable: item.type != '1',
-
disabled: item.type == '1',
-
}
-
arr.push(params)
-
})
-
}
-
return arr
-
})
-
this.treeData = this.treeData.concat(arr)
-
},
由于对数组的数据进行了出来,如果选择框内原本就有数据,查看页面详情时需要对数据进行回显,和对机构列表进行 - '已选中状态高亮',所以要对数据进行处理
-
/* 编辑 - 详情 带队领导选择字段回显 */
-
dealWithInitLeaders(v, random) {
-
/* 回显 当接口返回的leaders的id 和 机构列表的id一致,则同时修改表单leaders的id 和 列表的id */
-
let index = this.resLeaders.findIndex( item => item.value == v.sid)
-
if(index >= 0) {
-
this.resLeaders[index].value = random '-' v.sid
-
}
-
if(index >= 0) {
-
this.$nextTick( () => {
-
this.form.setFieldsValue({ leadersStr: this.resLeaders})
-
})
-
}
-
},
当然,懒加载部分也要添加,这样就能实现已选中的人员id和列表保持一致,避免同一个人员可以选择多次的情况
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfbffh
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01