100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Vue下拉列表el-select二级联动效果

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

时间:2024-04-17 18:05:19

相关推荐

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

最近公司有一个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;}},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。