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

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

wengqt

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

阅读量1.6k

点赞数

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

本文链接：https://blog.youkuaiyun.com/wengqt/article/details/80481734

版权

智库项目同时被 3 个专栏收录

14 篇文章

订阅专栏

前端开发

14 篇文章

订阅专栏

12 篇文章

订阅专栏

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

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

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

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

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

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

我们需要在table组件中，先获取到映射表，然后将其转化成我们所需要的数据类型：

this.schoolData=config.collegeAndMajor();
    this.schoolOptions=[]
    for(let key in this.schoolData){
      let cd = [];
      for(let c in this.schoolData[key]['children']){
        cd.push({
          value: c,
          label: this.schoolData[key]['children'][c],
        })
      }
      
       this.schoolOptions.push({
        value: key,
        label: this.schoolData[key]['name'],
        children: cd,
      })
    }

然后，级联选择器组件会根据这个来进行渲染：

{
      title: '学院&专业',
      dataIndex: 'xm',
      key: 'xm',
      render: (val,line) => {
        return this.state.changeLine[line.key]?( <Cascader options={this.schoolOptions} defaultValue={[val[0].toString(),val[1].toString()]} onChange={(value)=>{let v = value.length==0?val:value;this.modify(line.key,'xm',v)}} />
        ):(this.schoolData[val[0]]['name']+'/'+this.schoolData[val[0]]['children'][val[1]])
      }
    }

就这样，解决了学院与专业获取的难题。