elementUI 中动态获取路由

需求：点击当前页面的按钮跳转到首页，给menu中绑定的default-active赋值

问题：页面已经跳转过去，可menu选中项根本没有发生变化

解决办法： 直接将当前页面的路由绑定到default-active上，同时将index改为当前路由，这样在通过非点击导航菜单跳转页面时就不需要再来手动改变导航菜单的选中项了，它会自己选中当前页面的tab项，完美解决！

说明：router属性很重要，default-active="this$routepath"也很重要。

在public文件夹里面，新建mock文件夹，在里面建一个menujson文件模拟后台数据

关于element select框默认值赋值不成功问题，注意两点：

1、v-model里面的数据和遍历出来value值数据类型不一样。（例：itemprovinces类型是number，province类型是String。类型不一样导致赋值不成功）

2、遍历数据和赋值的先后顺序，必须保证数据先遍历后赋值。

注意注意注意：要为select设定默认值，只要把v-model绑定的值和你想要选中option的value值设置一样即可。

<el-form-item label="省:">

<el-select @change="getCid(editFormpid)" v-model="editFormpid" clearable placeholder="请选择省">

<el-option

:key="0"

label="请选择"

:value="0">

</el-option>

<el-option

v-for="item in optionsPid"

:key="itemregionId"

:label="itemregionName"

:value="itemregionId">

</el-option>

</el-select>

</el-form-item>

<el-select @change="getAid(editFormcid)" v-model="editFormcid" clearable placeholder="请选择市">

<el-option

:key="0"

label="请选择"

:value="0">

</el-option>

<el-option

v-for="item in optionsCid"

:key="itemregionId"

:label="itemregionName"

:value="itemregionId">

</el-option>

</el-select>

<el-form-item label="省:">

<el-select @change="getCid(editFormpid)" v-model="editFormpid" clearable placeholder="请选择省">

<el-option

:key="0"

label="请选择"

:value="0">

</el-option>

<el-option

v-for="item in optionsPid"

:key="itemregionId"

:label="itemregionName"

:value="itemregionId">

</el-option>

</el-select>

</el-form-item>

<el-select @change="getAid(editFormcid)" v-model="editFormcid" clearable placeholder="请选择市">

<el-option

:key="0"

label="请选择"

:value="0">

</el-option>

<el-option

v-for="item in optionsCid"

:key="itemregionId"

:label="itemregionName"

:value="itemregionId">

</el-option>

</el-select>

<el-form-item label="省:">

<el-select @change="getCid(editFormpid)" v-model="editFormpid" clearable placeholder="请选择省">

<el-option

:key="0"

label="请选择"

:value="0">

</el-option>

<el-option

v-for="item in optionsPid"

:key="itemregionId"

:label="itemregionName"

:value="itemregionId">

</el-option>

</el-select>

</el-form-item>

<el-select @change="getAid(editFormcid)" v-model="editFormcid" clearable placeholder="请选择市">

<el-option

:key="0"

label="请选择"

:value="0">

</el-option>

<el-option

v-for="item in optionsCid"

:key="itemregionId"

:label="itemregionName"

:value="itemregionId">

</el-option>

</el-select>

重要的事情说三遍data定义必须与后台一致的数据类型，比如后台返回来的是数字，就必须定义数字类型的

pid:0,//必须制定Number（与后台返回来的数据类型一致）

cid:0,//必须制定Number（与后台返回来的数据类型一致）

aid:0,//必须制定Number（与后台返回来的数据类型一致）

赋值的时候也必须是数字类型的

VillageInfo(id){

if(id){

apigetVillageInfo(id)then(res => {

if(resstatus==200){

thisgetCid(resdatapid)

thisgetAid(resdatacid)

thispName=resdatapName;

thiscName=resdatacName;

thisaName=resdataaName;

thispid=resdatapid;

thiseditForm={

//省市区

pid:Number(resdatapid),

cid:Number(resdatacid),

aid:Number(resdataaid),

villageId:resdatavillageId,

villageName:resdatavillageName,

villageCoding:resdatavillageCoding,

useArea:resdatauseArea,

netArea:resdatanetArea,

buildingNo:resdatabuildingNo==0"":resdatabuildingNo,

buildingArea:resdatabuildingArea,

notArea:resdatanotArea,

lockingArea:resdatalockingArea,

menuId:resdatamenuId,

status:resdatastatus,

isBenefit:resdataisBenefit,

//付款场景

// fromType:this$refsformTypeChildtempValue,

address:resdataaddress,

companyId:resdatacompanyId,

};

}

})

}

},

1 基本三大组件

2 数据收集

在 el-form 上面指定 model，在 el-input 组件加 v-model 进行双向数据绑定

3 数据校验

在el-form 上面指定 rules 校验规则，在 el-form-item 组件加 prop，指定要校验的字段

32 表单预校验，当所有的内容都符合规则了，才去调用对应的接口

————————————————

原文链接：>

以上就是关于elementUI 中动态获取路由全部的内容，包括:elementUI 中动态获取路由、2019-03-13 element-ui select下拉框默认值的问题(赋值出来是id而不是汉字)、Element-ui 表单的基础使用等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！