版权声明:本文为博主原创文章,转载时请注明出处。 https://blog.csdn.net/nxw_tsp/article/details/85092419
最近公司有一个C#的项目需要来完成,前端用了Vue.js。首次使用Vue.js还是有点不适应的。
功能介绍:要实现第一级下拉列表数据改变时,二级下拉列表的值随着改变。
<el-form-item prop="p_Roleprop" label="角色权限:">
<div>
<el-select v-model="p_Role.value" style="width:230px" @change="Rolechanges()" placeholder="请选择">
<el-option v-for="item in EUserP_Role" :key="item.value" :label="item.key" :value="item.value"> </el-option>
</el-select>
<span style="color:#606266;">表名</span>
<el-select v-model="p_table.value" style="width:230px" @change="Tablechanges()" placeholder="请选择">
<el-option v-for="item in EUserP_Table" :key="item.value" :label="item.key" :value="item.value"> </el-option>
</el-select>
</div>
</el-form-item>
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;
}
},