【vue+elementUI】实现三级联动

665 阅读1分钟

本质就是:

先请求一级分类的数据进行展示,二级分类与三级分类的数据为空。在选择确定了一级分类之后,通过将一级分类的id作为参数请求对应的二级分类数据。再以此类推,得到三级分类的数据。

往往还伴随着以下后续事件:

1.在C端平台(eg:tb、jd等等)中,点击中途任意一个分类的任意一个项,进行页面跳转;

2.在B端平台(eg:后台管理系统)中,点击三级分类时请求数据更新当前页面;

类似的接口展示:

image.png

image.png

实现思路:

1.页面挂载完成时,请求一级分类的数据;

2.选定一级分类后(触发el-select自带的change事件),携带一级分类的id请求二级分类的数据;

3.选定二级分类后(触发el-select自带的change事件),携带二级分类的id请求三级分类的数据;

4.选定三级分类后,携带全部分类的id请求数据更新页面;

5.业务逻辑优化:一级分类的选定后(触发el-select自带的change事件),清除二级三级分类的数据及其绑定的id;二级分类的选定后(触发el-select自带的change事件),清除三级分类的数据及其绑定的id。 image.png

6.要注意三级联动组件与展示最终数据的组件之间的关系。选定三级分类后,更适合的方法应该是把请求参数传给父组件(自定义事件),让父组件去请求数据,再传入展示数据的组件。

image.png image.png image.png