---

一、效果图

产品要求只要级联选择面板，还好antd里面有个自定义显示的例子

二、动态加载

popupVisible是用来控制选择面板的显示和隐藏的。

<a-cascader
  :options="categoryList"
  :loadData="loadData"
  @change="onChange"
  change-on-select
  :popupVisible="true"
  :getPopupContainer="(triggerNode) => triggerNode.parentNode"
  :field-names="{ label: 'categoryName', value: 'categoryId', children: 'children' }">
  <a href="#"></a>
</a-cascader>

  mounted () {
  // 获取一级类目数据
    this.getList()
  },
  getList (targetOption) {
      let obj = {
        levelCode: 1,
      }
      if (targetOption) {
      // 这是后端返回的数据里面带的字段，levelCode为3时表示是最后一级，就不需要请求数据了
        if (targetOption.levelCode == 3) { 
          targetOption.loading = false
          return
        }
        obj = {
          categoryId: targetOption.categoryId,
        }
      }
      '接口名称'(obj).then((res) => {
        if (res && res.code == 0) {
          const list = res.result.map((item) => {
            // levelCode == 3 时表示是叶子节点
            item.isLeaf = item.levelCode == 3
            return item
          })
          if (targetOption) { // 如果是点击的一级
            targetOption.children = list
            this.categoryList = [...this.categoryList]
            targetOption.loading = false
          } else { // 请求一级数据
            this.categoryList = list
          }
        }
      })
    },

二、动态回显

回显的时候一定要加上 v-if=“showBackCategory”

<a-cascader
   :options="categoryList"
   ref="category"
   placeholder="请选择类目"
   @change="onChange"
   change-on-select
   v-if="showBackCategory"
   v-model="selectedList"
   :popupVisible="true"
   :getPopupContainer="(triggerNode) => triggerNode.parentNode"
   :field-names="{
     label: 'categoryName',
     value: 'categoryId',
     children: 'children'
   }"
 >
   <a href="#"></a>
 </a-cascader>

getSpuInfo () {
 '详情接口'({ id: id }).then(async (res) => {
   if (res && res.code == 0) {
     const list = res.result.categoryId.split(',').map(Number)
     this.selectedList = list
     for (let i = 0; i < list.length - 1; i++) {
       await this.getNextList(list[i])
     }
     this.showBackCategory = true // 回显数据处理完之后
   }
 })

// 在mounted 里面先请求一级数据
    getList () {
      const obj = {
        levelCode: this.levelCode,
        statusFlag: 1
      }
      '接口名称'(obj).then((res) => {
        if (res && res.code == 0) {
          const list = res.result.map((item) => {
            // levelCode == 3 时表示是叶子节点
            item.isLeaf = item.levelCode == 3
            return item
          })
          this.categoryList = list
        }
      })
    },
    // 下一级数据
    async getNextList (targetOption) {
      let obj = {
        categoryId: targetOption
      }
      if (Object.keys(targetOption).length > 0) {
        if (targetOption.levelCode == 3) {
          targetOption.loading = false
          return
        }
        obj = {
          categoryId: targetOption.categoryId
        }
      }
      await '接口名称'(obj).then((res) => {
        if (res && res.code == 0) {
          const list = res.result.map((item) => {
            // levelCode == 3 时表示是叶子节点
            item.isLeaf = item.levelCode == 3
            return item
          })
 // 动态回显时的targetOption为需要回显的每一项的id
 // 选择时targetOption 为选择的选项的信息
          if (Object.keys(targetOption).length > 0) {
            targetOption.children = list
            targetOption.loading = false
          } else {
            this.categoryList.forEach((item, index) => {
              if (item.children) {
                item.children.forEach((ite, i) => {
                  if (ite.categoryId == targetOption) {
                    ite.children = list
                  }
                })
              }
              if (item.categoryId == targetOption) {
                item.children = list
              }
            })
          }
          this.categoryList = [...this.categoryList]
        }
      })
    },

以上就可以实现动态回显了，接下来就是选择其它的选项怎么动态加载，在回显时，没有用loadData事件，而是使用了change事件。

    onChange (value, selectedOptions) {
      const option = selectedOptions[selectedOptions.length - 1]
      this.getNextList(option)
    },