自定义的vue+element-ui三级联动菜单

在使用element-ui的form做一个信息收集的表单时，遇到了根据  第一个下拉框  选择的  角色id  作为  对  form中  其他下拉框   状态  是否禁用 的标识。简而言之，比如存在4个角色id(A,B,C,D)，需要选择的其余下拉框有X和Y。

在角色id为A,B时，X启用，Y禁用

在角色id为C时，X启用，Y也启用

在角色id为D时，X禁用，Y禁用

其中X,Y是联动菜单，光看规则也是有点头大了😨！

为了确保XY不会擅自打开，一开始就禁用了这2个下拉框，也可以隐藏起来，在状态是解开的时候再显示。

需要注意的是，在选择了角色id后，需要在当前的函数中写获取下级菜单X的方法，否则，会显示X有值，并非已经获取了X内容，而是显示在X位置的数组并没有执行获取值的请求操作。

同理，在X值变化监听函数内也要对应拉取Y的值，并对X和Y的禁用状态进行修改。

可以使用watch来监听这些值的禁用状态变化，使用this.$set设置验证条件是否添加required（进入监听函数就要重置一次其为false,然后设置条件打开）

这里的思路是，

1.首先先启用普适角色可以选择的下拉框，监听用户选中的角色id，同时根据角色id获取下一级菜单的下拉选项，逐层启用或禁用。

2.当用户在所有下拉菜单都打开的情况下修改中间某一层菜单的选项时，是根据当前角色id下可以被选择的，修改后还要或重新赋值对应下级菜单的菜单项，或禁用相关菜单

　　当用户在全部启用的情况下重新选择角色id时，需要将1的步骤重新来过就可以了