如何实现Dropdown下拉菜单里多选且回显

一、思路和步骤

1.明确需求和效果

2.思路和知识点：

2.1 el-dropdown标签上写trigger=“click”，即点击时才激活展示下拉菜单内容；

2.2 el-dropdown标签里放span标签，span里面放系统选择和小图标，span标签上要绑定hGetReleaseAll点击事件，点击时则调接口获取下拉菜单中要展示的所有可供选择的选项数组allList；

2.3 span上绑定ref=‘dropdown111’，在取消按钮上绑定的点击事件@click="$refs.dropdown111.click()" ，用于点击取消或者确定按钮后，达到下拉菜单收起的效果；

2.4 el-dropdown-menu标签里放el-checkbox多选框，然后多选框绑定v-for循环的是前面获取的allList数组的每一项，v-model绑定的是item.isChecked，即已经选择过的选项的状态，再次打开会回显；el-checkbox里面放要展示的图片以及item.name；

2.5 由于需求是只有点击el-checkbox多选框时才选中，点击el-checkbox上展示的文字（item.name）不会选中，则需要在放文字的span标签上加@click.prevent，来阻止事件的默认行为；

2.6 点击确定按钮，将allList数组用map遍历，当 item.isChecked===true即选中的，则返回选中的每一项的id，若没有选中的则返回的id是undefined，所以再将id组成的新数组再用filter把每一项 item给筛选出来，从而去掉了那些undefined，再作为入参传给后端。

二、代码

<template>
  <div class="zll">
    <div class = "zll1">
       <span style="font-size: 12px;color:#b3b3b3;width: 50px;" class="xTXZ">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link" @click='hGetReleaseAll' ref='dropdown111'>
              系统选择<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" id="dropdown" class="cjycjy">
              <div class="hezione" @click.native.prevent>
                  <el-checkbox v-model="item.isChecked" v-for="item in allList" :key='item.id' >
                     <div  @click.prevent> <img src="../photos/icon-rongzix.svg" alt="" @click.prevent>
                     <span @click.prevent style="width:200px" class="aaa">{{item.name}}</span></div>
                  </el-checkbox>
                  <div class="btn">
                     <el-button type="primary" class="sure" @click="hSureEdit">确认</el-button>
                     <el-button class="cancel" @click="$refs.dropdown111.click()">取消</el-button>
                  </div>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
    </div>
  </div>
</template>

<script>
export default {
data () {
    return {
      allList:[],  //所有线上系统
      systemIds:[],  //用户新勾选系统
    }
  },
methods:{
    hGetReleaseAll(){
      let userId = JSON.parse(sessionStorage.getItem('user')).id
      console.log(userId)
      this.$api('selectReleaseAllByAccountId',{params:{ id: userId }}).then(res => {
            if (res && res.data.state == 'success') {
                this.allList=res.data.data
            }
        })
    },
    
    // 确认修改功能
    hSureEdit(){
      let arr = this.allList.map(function (item) { 
         if(item.isChecked===true){
          return item.id
         }
      })
      this.systemIds = arr.filter(item=>{
        return item
      })
      console.log(this.systemIds);
      let params = {
          userId : JSON.parse(sessionStorage.getItem('user')).id,
          systemIds : this.systemIds
        }
        this.$api("selectdEdit",{params}).then(res => {
        if (res && res.data.success) {
            this.$refs.dropdown111.click()
            this.$popSuccess(res.data.message)
          }else {
              this.$popError(res.data.message)
            }
         })
       },
    },
 }
</script>