Vue下拉列表el-select二级联动效果

最近公司有一个C#的项目需要来完成，前端用了Vue.js。首次使用Vue.js还是有点不适应的。

功能介绍：要实现第一级下拉列表数据改变时，二级下拉列表的值随着改变。

        

          
             
          
          表名
          
             
          
        
      

JS代码：

getRole() {
      this.EUserP_Role = [];
      this.$API.Permission.Get_Role().then(res => {
        res.forEach((o, index) => {
          this.EUserP_Role.push({ key: o.Name, value: o.ID });       
        });
      });
    },
    Rolechanges() {
      this.EUserP_Table = [];
      this.$API.Permission.Get_Table({ prid: this.p_Role.value }).then(res => {
        res.forEach((o, index) => {
          this.EUserP_Table.push({ key: o.TableName, value: o.ID });
        });
      });
      this.isAble = false;
      this.p_table.value = "";
    },
    Tablechanges() {
      this.EUserP_Field = [];
      this.$API.Permission.Get_Field({ ptid: this.p_table.value }).then(res => {
        res.forEach((o, index) => {
          this.EUserP_Field.push({ key: o.FieldName, value: o.ID });  
        });
      });
      if (this.EUserP_Table.findByID(this.p_table.value, "value").key == "Product Group" || this.EUserP_Table.findByID(this.p_table.value, "value").key == "Product RRP"){
            this.isAble=true;
        }else{
          this.isAble=false;
        }

    },