亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2020年04月10日 11:33:20   作者:小羽向前跑  
這篇文章主要為大家詳細(xì)介紹了vue+element搭建后臺(tái)小總結(jié),el-dropdown下拉功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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

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

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

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

上代碼部分  html

//全部城市 下拉
//handleCommand下拉事件 all_city點(diǎn)擊后顯示在上面的數(shù)據(jù) 
item.label下拉的數(shù)據(jù) :command點(diǎn)擊傳的值 用flag來(lái)區(qū)分同一個(gè)事件的不同處理方法
 
<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)的是哪個(gè)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ā)起請(qǐng)求 篩選數(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"
 }
//請(qǐng)求函數(shù) 我用的是vue-admin-template的vue后臺(tái)基礎(chǔ)模板 請(qǐng)求是封裝好的
 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="無(wú)效"
 }
 })
 this.tableData =Data
 this.total = res.pager.totalItems
 })
 }
}

如果大家還想深入學(xué)習(xí),可以點(diǎn)擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進(jìn)行學(xué)習(xí)。

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

相關(guān)文章

  • vue實(shí)現(xiàn)移動(dòng)端圖片裁剪上傳功能

    vue實(shí)現(xiàn)移動(dòng)端圖片裁剪上傳功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端圖片裁剪上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • Vue圖片懶加載之Vue-Lazyload的使用

    Vue圖片懶加載之Vue-Lazyload的使用

    懶加載就是延時(shí)加載,即當(dāng)需要用到的時(shí)候再去加載,本文主要介紹了Vue圖片懶加載之Vue-Lazyload的使用,具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-05-05
  • 解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navigation?to?current?location

    解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navig

    這篇文章主要給大家介紹了關(guān)于解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關(guān)資料,這是最近做項(xiàng)目時(shí)候遇到的一個(gè)問(wèn)題,現(xiàn)將解決辦法分享出來(lái),需要的朋友可以參考下
    2023-01-01
  • vue-cli中的:visible.sync是什么意思

    vue-cli中的:visible.sync是什么意思

    visible前面加冒號(hào)的,說(shuō)明后面是一個(gè)變量或者表達(dá)式;沒(méi)加冒號(hào)的后面就是對(duì)應(yīng)的字符串字面量,這篇文章主要介紹了vue-cli中的:visible.sync是什么,需要的朋友可以參考下
    2022-11-11
  • elementui+vue+axios實(shí)現(xiàn)文件上傳本地服務(wù)器

    elementui+vue+axios實(shí)現(xiàn)文件上傳本地服務(wù)器

    這篇文章主要為大家詳細(xì)介紹了elementui+vue+axios實(shí)現(xiàn)文件上傳本地服務(wù)器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • Vue自定義指令實(shí)現(xiàn)按鈕級(jí)的權(quán)限控制的示例代碼

    Vue自定義指令實(shí)現(xiàn)按鈕級(jí)的權(quán)限控制的示例代碼

    在Vue中可以通過(guò)自定義指令來(lái)實(shí)現(xiàn)按鈕權(quán)限控制,本文主要介紹了Vue自定義指令實(shí)現(xiàn)按鈕級(jí)的權(quán)限控制的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-05-05
  • 在Vue項(xiàng)目中集成和使用Lottie動(dòng)畫(huà)庫(kù)的步驟詳解

    在Vue項(xiàng)目中集成和使用Lottie動(dòng)畫(huà)庫(kù)的步驟詳解

    Lottie 是一個(gè)由 Airbnb 開(kāi)源的動(dòng)畫(huà)庫(kù),它允許你在 Web、iOS、Android 等平臺(tái)上使用體積小、高性能的體驗(yàn)豐富的矢量動(dòng)畫(huà),本文將詳細(xì)介紹在 Vue 項(xiàng)目中如何集成和使用 Lottie,文中有詳細(xì)的代碼講解,需要的朋友可以參考下
    2023-11-11
  • 詳細(xì)講解如何創(chuàng)建, 發(fā)布自己的 Vue UI 組件庫(kù)

    詳細(xì)講解如何創(chuàng)建, 發(fā)布自己的 Vue UI 組件庫(kù)

    當(dāng)我們自己開(kāi)發(fā)了一個(gè) _UI Component_, 需要在多個(gè)項(xiàng)目中使用的時(shí)候呢? 我們首先想到的可能是直接復(fù)制一份過(guò)去對(duì)嗎?我們?yōu)槭裁床话l(fā)布一個(gè) UI 組件庫(kù)給自己用呢?下面小編和大家來(lái)一起學(xué)習(xí)下吧
    2019-05-05
  • Vue中使用和移除總線Bus的注意事項(xiàng)詳解

    Vue中使用和移除總線Bus的注意事項(xiàng)詳解

    Vue中的總線Bus是一種通信機(jī)制,可用于組件間的數(shù)據(jù)傳遞和事件觸發(fā)。使用時(shí)需要注意Bus的命名和定義、監(jiān)聽(tīng)和觸發(fā)事件的方法、移除和銷毀Bus的時(shí)機(jī)和方式等問(wèn)題。合理使用總線Bus可以提高組件的復(fù)用性和可維護(hù)性,但過(guò)度依賴可能會(huì)導(dǎo)致代碼耦合和難以維護(hù)
    2023-04-04
  • vue?element?ui?Select選擇器如何設(shè)置默認(rèn)狀態(tài)

    vue?element?ui?Select選擇器如何設(shè)置默認(rèn)狀態(tài)

    這篇文章主要介紹了vue?element?ui?Select選擇器如何設(shè)置默認(rèn)狀態(tài)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,
    2023-10-10

最新評(píng)論