学院以及专业选择框的级联选择

最新推荐文章于 2023-07-26 21:00:07 发布

wengqt

最新推荐文章于 2023-07-26 21:00:07 发布

阅读量1.6k

点赞数

分类专栏：智库项目 js 前端开发 React 文章标签： js react antdesign

本文链接：https://blog.csdn.net/wengqt/article/details/80481734

版权

本文探讨了在前端学院与专业选择中，采用级联选择器Cascader的方法，避免了多次网络请求和数据错误。通过将学院与专业映射整合到全局config，简化了数据获取流程，并在表格组件中展示了如何转换和渲染数据。

摘要由CSDN通过智能技术生成

在学院信息和专业信息的获取这有两种可行方案，一种是分开获取，先获取学院，再根据学院获取专业；另一种是直接获取到整个学院跟专业的映射，然后根据这个来在前端进行展示，无需二次请求。这两种方法各有利弊，但是在这里，第一种方法是不可行的，因为我们是要在一个列表里面选择专业，如果在分开获取的话，会出现很多网络请求来获取专业信息；还有就是，如果一下子修改两行数据的话，两行的学院不一样，那么专业获取的内容将会出错，造成不必要的数据出错的问题。因此，我们将获取专业与学院结合，放入全局的config中。

collegeAndMajor:function(){
  return {1:{name:'软件学院',
    children:{
        101:'软件工程',
        102:'数字媒体'}
        }, 3:{name:'ddd',
        children:{
        '301':'dddm'
            }
          }
        };
}

然后我们要通过什么形式来展示呢？

这里，我们选择了级联选择器Cascader，样子是这样的。