vue+element 搭建后台小总结 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
      })
    }
}