vue+element搭建后臺小總結 el-dropdown下拉功能
本文實例為大家分享了el-dropdown下拉功能的具體代碼,供大家參考,具體內容如下
功能:點擊el-dropdown 下拉
下拉的數(shù)據(jù) 從后臺獲取 遍歷到界面上
且多個el-dropdown下拉 共用 一個 @command 事件 @command="handleCommand"

上代碼部分 html
//全部城市 下拉
//handleCommand下拉事件 all_city點擊后顯示在上面的數(shù)據(jù)
item.label下拉的數(shù)據(jù) :command點擊傳的值 用flag來區(qū)分同一個事件的不同處理方法
<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>
//全部狀態(tài) 下拉
<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區(qū)分用戶點的是哪個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
}
//點擊之后 發(fā)起請求 篩選數(shù)據(jù)
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"
}
//請求函數(shù) 我用的是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
this.total = res.pager.totalItems
})
}
}
如果大家還想深入學習,可以點擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進行學習。
以上就是javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單的全部代碼,希望對大家的學習有所幫助。
相關文章
Vue表單校驗validate和validateField的使用及區(qū)別詳解
validateField?和?validate?都可以用于表單驗證,但是它們的作用有所不同,下面這篇文章主要給大家介紹了關于Vue表單校驗validate和validateField的使用及區(qū)別的相關資料,需要的朋友可以參考下2024-04-04
詳解如何解決vue開發(fā)請求數(shù)據(jù)跨域的問題(基于瀏覽器的配置解決)
這篇文章主要介紹了詳解如何解決vue開發(fā)請求數(shù)據(jù)跨域的問題(基于瀏覽器的配置解決),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue2中組件互相調用實例methods中的方法實現(xiàn)詳解
vue在同一個組件內,方法之間經(jīng)常需要互相調用,下面這篇文章主要給大家介紹了關于vue2中組件互相調用實例methods中的方法實現(xiàn)的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
vue2 el-table行懸停時彈出提示信息el-popover的實現(xiàn)
本文主要介紹了vue2 el-table行懸停時彈出提示信息el-popover的實現(xiàn),用到了cell-mouse-enter、cell-mouse-leave兩個事件,具有一定的參考價值,感興趣的可以了解一下2024-01-01

