Vue下拉列表el-select二級聯動效果
阿新 • • 發佈:2018-12-19
最近公司有一個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; } },