需求:点击按钮,从数据库中随机调取两个人名,每次点击都随机抽取一遍.操作者不可随意选择人员.
我用的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)}},
