vue+element搭建后臺小總結 el-dropdown下拉功能
本文實例為大家分享了el-dropdown下拉功能的具體代碼,供大家參考,具體內容如下
功能:點擊el-dropdown 下拉
下拉的數據 從后臺獲取 遍歷到界面上
且多個el-dropdown下拉 共用 一個 @command 事件 @command="handleCommand"
上代碼部分 html
//全部城市 下拉 //handleCommand下拉事件 all_city點擊后顯示在上面的數據 item.label下拉的數據 :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ā)起請求 篩選數據 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 this.total = res.pager.totalItems }) } }
如果大家還想深入學習,可以點擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進行學習。
以上就是javascript實現省市區(qū)三級聯動下拉框菜單的全部代碼,希望對大家的學習有所幫助。
相關文章
解決Vue路由導航報錯:NavigationDuplicated:?Avoided?redundant?navig
這篇文章主要給大家介紹了關于解決Vue路由導航報錯:NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關資料,這是最近做項目時候遇到的一個問題,現將解決辦法分享出來,需要的朋友可以參考下2023-01-01elementui+vue+axios實現文件上傳本地服務器
這篇文章主要為大家詳細介紹了elementui+vue+axios實現文件上傳本地服務器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-08-08詳細講解如何創(chuàng)建, 發(fā)布自己的 Vue UI 組件庫
當我們自己開發(fā)了一個 _UI Component_, 需要在多個項目中使用的時候呢? 我們首先想到的可能是直接復制一份過去對嗎?我們?yōu)槭裁床话l(fā)布一個 UI 組件庫給自己用呢?下面小編和大家來一起學習下吧2019-05-05vue?element?ui?Select選擇器如何設置默認狀態(tài)
這篇文章主要介紹了vue?element?ui?Select選擇器如何設置默認狀態(tài)問題,具有很好的參考價值,希望對大家有所幫助,2023-10-10