vue+element搭建后臺小總結(jié) el-dropdown下拉功能
本文實例為大家分享了el-dropdown下拉功能的具體代碼,供大家參考,具體內(nèi)容如下
功能:點擊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后臺基礎(chǔ)模板 請求是封裝好的
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
})
}
}
如果大家還想深入學(xué)習(xí),可以點擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進行學(xué)習(xí)。
以上就是javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單的全部代碼,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
解決Vue路由導(dǎo)航報錯:NavigationDuplicated:?Avoided?redundant?navig
這篇文章主要給大家介紹了關(guān)于解決Vue路由導(dǎo)航報錯:NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關(guān)資料,這是最近做項目時候遇到的一個問題,現(xiàn)將解決辦法分享出來,需要的朋友可以參考下2023-01-01
elementui+vue+axios實現(xiàn)文件上傳本地服務(wù)器
這篇文章主要為大家詳細(xì)介紹了elementui+vue+axios實現(xiàn)文件上傳本地服務(wù)器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-08-08
Vue自定義指令實現(xiàn)按鈕級的權(quán)限控制的示例代碼
在Vue中可以通過自定義指令來實現(xiàn)按鈕權(quán)限控制,本文主要介紹了Vue自定義指令實現(xiàn)按鈕級的權(quán)限控制的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-05-05
詳細(xì)講解如何創(chuàng)建, 發(fā)布自己的 Vue UI 組件庫
當(dāng)我們自己開發(fā)了一個 _UI Component_, 需要在多個項目中使用的時候呢? 我們首先想到的可能是直接復(fù)制一份過去對嗎?我們?yōu)槭裁床话l(fā)布一個 UI 組件庫給自己用呢?下面小編和大家來一起學(xué)習(xí)下吧2019-05-05
vue?element?ui?Select選擇器如何設(shè)置默認(rèn)狀態(tài)
這篇文章主要介紹了vue?element?ui?Select選擇器如何設(shè)置默認(rèn)狀態(tài)問題,具有很好的參考價值,希望對大家有所幫助,2023-10-10

