vue+element搭建后台⼩总结el-dropdown下拉功能本⽂实例为⼤家分享了el-dropdown下拉功能的具体代码，供⼤家参考，具体内容如下
功能：点击el-dropdown 下拉
下拉的数据从后台获取遍历到界⾯上
且多个el-dropdown下拉共⽤⼀个 @command 事件  @command="handleCommand"
上代码部分  html
//全部城市下拉
vue element admin//handleCommand下拉事件 all_city点击后显⽰在上⾯的数据
item.label下拉的数据 :command点击传的值⽤flag来区分同⼀个事件的不同处理⽅法
<el-form-item label>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
{{ all_city }}<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown" align="center">
<el-dropdown-item
v-for="item in all_city_list"
:key="item.value"
:
command="{value:item.value,label:item.label,flag:1}"
> {{ item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-form-item>
//全部状态下拉
<el-form-item label>
<el-dropdown trigger="click" class="dropdown" @command="handleCommand">
<span class="el-dropdown-link">
{{ all_type_org }}<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu
slot="dropdown" align="center" class="org_select_menu_two">
<el-dropdown-item
v-for="item in all_type_org_list"
:key="item.value"
:command="{value:item.value,label:item.label,flag:2}"
> {{ item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-form-item>
js
methods: {
// select 点击
// command是接收点击传值⽤flag区分⽤户点的是哪个select 然后进⾏select赋值
handleCommand(command) {
console.log(command)
var isCommand = ''
switch (command.flag) {
case 1:
this.all_city = command.label
isCommand="AreaCode"
break
case 2:
this.all_type_org = command.label
isCommand="IsActived"
break
default:
return
}
//点击之后发起请求筛选数据
var data = {
"data": {
"numberPerPage": 10,
"currentPage":this.currentPage,
"filters": [
{
"key": isCommand,
"value": command.value
}
]
},
"correlationId": "535d12c3-4a75-4e5f-9236-9d8967f0bca8",
"invokingUser": "57a080b5-dd88-41b7-a9ea-7d7850bd396a",
"businessProcessName": "CommunitySearchService"
}
//请求函数我⽤的是vue-admin-template的vue后台基础模板请求是封装好的
communitySearch(data).then(res => {
let Data = JSON.parse(JSON.stringify(res.data));
Data.forEach((item, index) => {
if(item.isActived==true){
item.isActived="有效"
}
if(item.isActived==false){
item.isActived="⽆效"
}
})
this.tableData =Data
})
}
}
如果⼤家还想深⼊学习，可以点击、进⾏学习。
以上就是javascript实现省市区三级联动下拉框菜单的全部代码，希望对⼤家的学习有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。