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