vue+element搭建后台小总结 el-dropdown下拉功能

本文实例为大家分享了el-dropdown下拉功能的具体代码，供大家参考，具体内容如下

功能：点击el-dropdown 下拉

下拉的数据 从后台获取 遍历到界面上

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

上代码部分  html

//全部城市 下拉
//handleCommand下拉事件 all_city点击后显示在上面的数据
item.label下拉的数据 :command点击传的值 用flag来区分同一个事件的不同处理方法

<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>

//全部状态 下拉
<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区分用户点的是哪个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
  }
 //点击之后 发起请求 筛选数据
  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
  })
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。