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

淡淡的烟草味﹌ 2023-10-11 12:28 5阅读 0赞

功能：点击el-dropdown 下拉

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

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

![20190923155728438.gif][]

### 上代码部分 html ###

//全部城市 下拉
 //handleCommand下拉事件 all_city点击后显示在上面的数据 
 item.label下拉的数据 :command点击传的值 用flag来区分同一个事件的不同处理方法
 
 <el-form-item label>
 <el-dropdown @command="handleCommand">
 
 {
 { all_city }}
 
 <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">
 
 {
 { all_type_org }}
 
 <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
          })
        }
    }

[20190923155728438.gif]: https://img-blog.csdnimg.cn/20190923155728438.gif