vue+element搭建后臺小總結(jié) el-dropdown下拉功能

更新時間：2020年04月10日 11:33:20 作者：小羽向前跑

這篇文章主要為大家詳細(xì)介紹了vue+element搭建后臺小總結(jié)，el-dropdown下拉功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了el-dropdown下拉功能的具體代碼，供大家參考，具體內(nèi)容如下

功能：點(diǎn)擊el-dropdown 下拉

下拉的數(shù)據(jù) 從后臺獲取遍歷到界面上

且多個el-dropdown下拉共用一個 @command 事件 @command="handleCommand"

上代碼部分 html

//全部城市 下拉
//handleCommand下拉事件 all_city點(diǎn)擊后顯示在上面的數(shù)據(jù) 
item.label下拉的數(shù)據(jù) :command點(diǎn)擊傳的值 用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 點(diǎn)擊
 // command是接收點(diǎn)擊傳值 用flag區(qū)分用戶點(diǎn)的是哪個select 然后進(jìn)行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
 }
 //點(diǎn)擊之后 發(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í)，可以點(diǎn)擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進(jìn)行學(xué)習(xí)。

以上就是javascript實(shí)現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單的全部代碼，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: