vue多级下拉框 vue三级联动下拉框

vue三级联动下拉框？

从你提供的Web Api来看，其实你的后端Model并不是“三级联动”，而是二级联动，class和major没有层级关系，它们都是grade的下一级，class和major是并列的，建议你和你的后端好好再把数据模型对一下，免得产生歧义。
不考虑模型的差异，getDep已经拿到了grade，但是你并没有把它们放到form.grade里去，而是用它们做了点别的事，调取用户信息什么的。你接下来要做的是把grade放到form.grade里去，data里你所谓的item也没声明， 要通过watch item.grade来得知用户选择了新的年级，这时候通过你的Web Api去更新form.class和form.major。

如何实现多级联动下拉菜单效果

1、首先来说一下我们要实现的效果，就是我们选择1级菜单后，2级菜单里就有对应1级菜单的内容，我们选择2级菜单的项的时候，3级菜单会产生对应2级菜单项的内容，以此类推，来说一下我实现这种功能的原理，就是为不同的列的内容设置了名称，而这个名称恰好就是上一级菜单里的选择项。这样的情况下，在数据有效性中的函数读取的其实是引用这个名词所对应的区域内的内容，也就把我们下一级的菜单内容读取出来了。

2、接下来，我们来准备数据，根据第一步所描述的原理，我将列名进行了颜色处理，以方便大家去理解。

3、从1级项到3级项，高级别项是下一级的列名，这就是我们的数据源的格式，如果有的网友问，不加这些列名可以吗？回答是：可以的，不加列名的话，你需要知道每列对应的上一级的内容，加上只是方便查看。

4、接下来的一步是Office2003同2003以上版本不同的地方，创建名称，2003需要逐一创建，而像2013可以全选以后，系统会根据选择区域自行创建，不过逐一创建也有好处，就是我们不会出现部分值出现2次的现象。接下来，我们就逐一进行创建，首先创建“百度”的2级项内容。选中数据区域。

5、点击Ctrl F3，或者从菜单栏中选择“插入”--“名称”--“定义”。

6、需要注意的是，系统会默认所选区域的首单元格内容为当前工作薄名称，我们需要改为上一级的名称。 这里，它的上一级是“百度”。

点击“添加”，这样一个工作薄的名称就添加完成了，剩下的同理。

全部添加完成后，我们就完成了对所需要的数据区域的命名工作。

接下来，我们准备表格，我们需要将数据在表格中进行多级关联以实现我们想要的效果。

我们选择机构名称，然后在菜单栏中选择“数据”--“有效性”。

有效性条件选择“序列”，来源直接选择机构名称下的内容项。

确定之后，我们会发现，机构名称下就会有内容项了，当然了，这一步可能很多人都已经知道了，我就不过多解释了。

接下来，我们来关联2级的内容，同样在菜单栏中选择“数据”--“有效性”，有效性条件选择“序列”，但来源中，我们需要用到INDIRECT(目标单元格)，然后点击确定。

这样，我们就会发现，2级菜单的关联已经有了，而且不会出现重复的1级菜单项。

接下来我们关联3级菜单，同关联2级菜单一致，在来源中，我们需要用到INDIRECT($F14)。

这样，我们3级菜单也就关联完成了，包括4级，5级甚至更多，都可以这样来实现。