iview TreeSelect 异步加载子节点 编辑时不能正常回显

问题描述

因为分类数据太多，首次加载时间太长，和业务沟通改成异步加载子节点，解决了加载缓慢的问题，但编辑的时候回显就不能显示了，因为赋值的时候，下拉框数据中还没有加载已选中的项。该怎么办呢…

解决方案

结合业务考虑，因为分类的ID是输入框手动输入的，没有特定的格式，只根据多个分类的ID用分号分隔了，无法找到其父节点的分类ID，所以不能用递归调用数据的方法。想了一个让分类显示的方法，将需要回显的数据插入到categoryData中，实现编辑分类的回显。

示例代码

<template>
    <TreeSelect
       v-if="item.key === 'broader'"
       v-model="form[item.key]"
       :data="categoryData"
       :load-data="loadTreeList"
       multiple
     />
</template>
<script>
    export default {
	    props: {
	      categoryData: {
	        type: Array,
	        default: () => []
	      }
	    },
	    data () {
            return {
                value: [],
                nextValue: 1,
                data: [
                    {
                        title: 'parent1',
                        value: 'parent1',
                        loading: false,
                        selected: false,
                        checked: false,
                        children: []
                    }
                ]
            }
        },
        methods: {
            findById (node, targetId) {
		        // 如果当前节点的value等于targetId,直接返回当前节点
		        if (node.value === targetId) {
		          return node
		        }
		        // 如果当前节点有子节点，则遍历子节点
		        if (node.children && node.children.length) {
		          for (let child of node.children) {
		            const foundNode = this.findById(child, targetId)
		            if (foundNode) {
		              // 如果找到了匹配的节点则返回
		              return foundNode
		            }
		          }
		        }
		        // 如果遍历完所有的子节点都没有找到匹配的节点，则返回null
		        return null
		      },
		      initTreeData (categoryIds, labels) {
		        const data = _.cloneDeep(this.categoryData)
		        const existData = []
		        const categoryNodes = []
		        for (let i = 0, len = categoryIds.length; i < len; i++) {
		          data.forEach(item => {
		            const target = this.findById(item, categoryIds[i]) 
		            if (target) {
		              existData.push(target)
		            }
		          })
		          categoryNodes.push({
		            title: labels[i],
		            value: categoryIds[i],
		            selected: false
		          })
		        }
		        categoryNodes.forEach(node => {
		          const target = existData.find(existNode => existNode.value === node.value)
		          if (!target) {
		            this.categoryData.push(node)
		          }
		        })
		      },
		      async loadTreeList (broader, callback) {
		        return new Promise((resolve, reject) => {
		          const params = {
		            broader: broader.categoryId,
		            entryName: this.entryName
		          }
		          getTreeList(params).then(res => {
		            const data = res.map(item => {
		              item.title = item.prefLabel
		              item.value = item.categoryId
		              item.selected = false
		              item.checked = false
		              item.loading = false
		              return item
		            })
		            callback(data)
		            resolve(data)
		          }).catch(err => {
		            reject(err)
		          })
		        })        
		      },
		      init (row) {
		        this.visible = true
		        this.entryId = row.entryId
		        this.entryName = row.entryName
		        this.title = '新增'
		        if (row && row.id) {
		          this.id = row.id
		          this.title = '编辑'
		          this.form = { ...row }
		          if (this.form.broader) {
		            this.form.broader = row.broader.split(';')
		            this.initTreeData(row.broader.split(';'), row.category_pref_label.split(';'))
		          }
		          if (row.alt_label) {
		            this.altLabelList = row.alt_label.split(';')
		          }
		        }
		      },
        }
    }
</script>

禁用某项

当产品要求你某一项不让选，可以使用一下方式实现。

selectTreeDataFormat (data) {
  data.forEach(item => {
    item.title = item.categoryName
    item.value = item.categoryName
    if (item.parentId === 0) {
      item.disabled = true
    }
    if (Array.isArray(item.children) && item.children.length > 0) {
      this.selectTreeDataFormat(item.children)
    }
  })
  return data
}

将不让选的那一项增加disabled:true

参考文档：

https://www.iviewui.com/view-ui-plus/component/form/tree-select#load