antdv a-cascader级联选择动态加载及回显

江清月近人√

已于 2022-06-20 09:56:55 修改

阅读量6.3k

点赞数 3

分类专栏： vue 文章标签： javascript 前端

于 2022-06-15 15:36:14 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38019414/article/details/125297044

版权

本文介绍了如何在Ant Design Vue（antdv）中实现a-cascader组件的动态加载数据和回显功能。通过控制popupVisible展示选择面板，并在回显时利用v-if和change事件来实现数据的正确显示和动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、效果图
二、动态加载
二、动态回显

一、效果图

在这里插入图片描述产品要求只要级联选择面板，还好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