### 标签 ``` <div class="toolbar"> <div> <el-button type="primary" :icon="Plus" size="default" @click="openAddCertificateUser">添加 </el-button> <el-button type="success" :icon="Plus" size="default" @click="openChoiseFile">导入 </el-button> <el-button type="success" :icon="Plus" size="default" >模板下载 </el-button> <input type="file" ref="fileInut" style="display: none;" @change="handleFileUpload" /> </div> <div class="search"> <el-select @change="changeCertificateType" v-model="pageParam.certificateType" placeholder="请选择证书类型" class="select-level searchinput" size="default" clearable > <el-option :key="1" label="模块证书" :value="1" /> <el-option :key="2" label="课程证书" :value="2" /> <el-option :key="3" label="培训证书" :value="3" /> <el-option :key="4" label="生成证书" :value="4" /> </el-select> <el-select @change="getCertificateUserList" v-model="pageParam.moduleId" :filterable="true" size="default" class="searchinput" placeholder="请选择模块" clearable > <el-option v-for="op in state.moduleList" :key="op.id" :label="op.moduleName" :value="op.id" /> </el-select> <el-select clearable class="searchinput select-level" @change="getCertificateUserList" v-model="pageParam.lessionId" filterable placeholder="选择课程" size="default" > <el-option-group v-for="group in state.lessonList" :key="group.versionID" :label="group.versionName"> <el-option v-for="item in group.lessonList" :key="item.id" :label="item.lessonName" :value="item.id" /> </el-option-group> </el-select> <el-input v-model="pageParam.key" class="searchinput" placeholder="姓名、编号、名称" size="default" clearable /> <el-button type="primary" :icon="Search" size="default" @click="getCertificateUserList">搜索</el-button> </div> </div> ``` ### 样式: ``` <style scoped="scoped" lang="scss"> .certificate-user-container { padding: 15px; .toolbar { display: flex; justify-content: space-between; .search { display: flex; .searchinput { width: 129px; } } .search > * { margin-left: 5px; } @media (min-width: 924px) { .search { display: flex; .searchinput { width: 109px; } } } @media (min-width: 1024px) { .search { display: flex; .searchinput { width: 141px; } } } // @media (min-width: 1024px) { // .search { // display: flex; // .searchinput { // width: 169px; // } // } // } @media (min-width: 1399px) { .search { display: flex; .searchinput { width: 199px; } } .search > * { margin-left: 9px; } } @media (min-width: 1524px) { .search { display: flex; .searchinput { width: 219px; } } .search > * { margin-left: 9px; } } } } </style> ```