ant design vue的使用过程，遇到问题记录

1、异步TreeSelect 树型选择控件，回显问题

解决思路，记录各个节点的分支的所有ID，从第一层开始遍历，判断是否包含选中的ID，不断补充children

代码如下

<a-form-model-item  label="中图法分类号">
          <a-tree-select
            ref="tree_select"
            :replaceFields="replaceFields"
            v-model="form.category"
            style="width: 100%"
            multiple
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeData"
            placeholder=""
            :load-data="onLoadData"
          />
        </a-form-model-item>

js部分，定义data

<script>
import { materialType, materialStatus } from '@/config/database'
import { getCategoryList, getCategorySingle } from '@/api/category'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    return {
      ids: [],
      category: [],
      replaceFields: {
        children: 'children',
        title: 'name',
        key: '_id',
        value: '_id'
      },
      treeData: [
      ],
      materialType: materialType,
      materialStatus: materialStatus,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      form: {
      },
      rules: {
        originalId: [ { required: true, message: '原始Id不能为空！', trigger: 'change' } ],
        name: [{ required: true, message: '素材名称不能为空！', trigger: 'change' }],
        url: [{ required: true, message: '存储位置不能为空！', trigger: 'change' }],
        type: [{ required: true, message: '类型不能为空！', trigger: 'change' }],
        status: [{ required: true, message: '状态不能为空！', trigger: 'change' }]
      }
      // form: this.$form.createForm(this)
    }
  },
  watch: {
    value (value) {
      console.log(value)
    }
  },
  async created () {
    this.form = { ...this.model }
    this.initTreeData()
    // 初始化树形数据
    this.treeData = await this.getCategoryList(null)
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.form = { ...this.model }
      this.initTreeData()
    })
  },
  methods: {
    async initTreeData () {
      this.ids = []
      if (this.form.category && this.form.category.length > 0) {
        for (let i = 0; i < this.form.category.length; i++) {
          await this.getCategoryPID(this.form.category[i])
        }
        if (this.ids.length > 0) {
          var mySet = new Set(this.ids)
          this.ids = [ ...mySet ]
          // 处理完后加载数据
          this.calTree(this.treeData)
        }
      }
    },
    async calTree (dataArray) {
      for (let i = 0; i < dataArray.length; i++) {
        if (this.ids.indexOf(dataArray[i]._id) >= 0) {
          // 主动加载
          const res = await getCategoryList({
            query: { parent: dataArray[i]._id, status: 'ENABLED' }
          })
          this.$set(dataArray[i], 'children', res.data.rows)
          if (res.data.rows.length > 0) {
            this.calTree(dataArray[i].children)
          }
        }
      }
    },
    // 不断获得上一级的pid
    async getCategoryPID (_id) {
      const res = await getCategorySingle({
        query: {
          _id: _id
        }
      })
      this.ids.push(res.data.row._id)
      if (res.data.row.parent) {
        await this.getCategoryPID(res.data.row.parent)
      }
    },
    // 通过PID查询树形列表的内容
    async getCategoryList (pid) {
      const res = await getCategoryList({
        query: { parent: pid, status: 'ENABLED' }
      })
      return res.data.rows
    },
    onLoadData (treeNode) {
      return new Promise(resolve => {
        const { _id } = treeNode.dataRef
        if (this.ids.indexOf(_id) >= 0) {
          // 存在，不重新查该children了
          resolve()
        } else {
          setTimeout(async () => {
            const data = await this.getCategoryList(_id)
            this.$set(treeNode.dataRef, 'children', data)
            resolve()
          }, 300)
        }
      })
    }
  }
}
</script>