elementUI el-select取消/隐藏下拉框 随机抽取人员

需求:点击按钮,从数据库中随机调取两个人名,每次点击都随机抽取一遍.操作者不可随意选择人员. 

 我用的el-select.使用官方组件库中的远程搜索功能,去掉了下拉框和选择框中最右边的小三角.

 但是鼠标点击选择框还会触发下拉框. 于是用css禁止了鼠标事件.

 在测试过程中发现选择框的最右边即使没有小三角,但是点击对应区域时,还会触发下拉框.所有把小三角区域也设置了css, display:none

代码如下: 

      <el-row>
        <el-col :span="24">
          <el-form-item label="某某测评人员" prop="GGnickName">
            <el-select class="select-none" v-model="form.GGnickName" placeholder="请选择" style="width: 86%;margin-right: 20px" filterable multiple remote
                      >
              <el-option v-for="(item,index) in GGUserList" :key="item.userId" :label="item.nickName"
                         :value="item.userDeptId"/>
            </el-select>
            <el-button style="float: right" type="primary" size="small" @click="selectionGGExperts">随机选择人员</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="某某测评人员" prop="WGnickName">
            <el-select class="select-none" v-model="form.WGnickName" placeholder="请选择" style="width: 86%;margin-right: 20px" filterable multiple remote
                       >
              <el-option v-for="(item,index) in WGUserList" :key="item.userId" :label="item.nickName"
                         :value="item.userDeptId"/>
            </el-select>
            <el-button style="float: right" type="primary" size="small" @click="selectionWGExperts">随机选择人员</el-button>
          </el-form-item>
        </el-col>
      </el-row>

CSS:

/*为select框添加class*/
 .select-none{
      pointer-events: none;
   /*取消选择框最右边的图标事件*/
   ::v-deep .el-input__suffix {
     display: none;
   }
  }

js获取人员组

    //获取人员列表
    expert(){
      //调取接口获取某某人员列表
      expertGroup({groupNos:"OverallMerit-WG-001"}).then((response) => {
        if (response.code == 200) {
          this.WGUserList = response.data[0].userGroups

        }
      });
      //调取接口获取某某某人员列表
      expertGroup({groupNos:"OverallMerit-GG-001"}).then((response) => {
        if (response.code == 200) {
          this.GGUserList = response.data[0].userGroups
        }
      });

    },
    //点击按钮 随机选择测评人员
    selectionWGExperts(){
      
      this.form.WGnickNameList = [];
      for (let i = 0; i < this.WGUserList.length; i++) {
        this.form.WGnickNameList.push(this.WGUserList[i].nickName)
      }
      this.form.WGnickName=[];
      for(let i=0;i<2;i++)
      {
        let _num2 = Math.floor(Math.random()*this.form.WGnickNameList.length)
        let mm2 = this.form.WGnickNameList[_num2];
        this.form.WGnickNameList.splice(_num2,1)
        this.form.WGnickName.push(mm2)
      }
    },
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值