效果如下：
展示文案在最下面，跟选项有个分割线
<el-select v-model="value" placeholder="请选择" clearable popper-class="addNotice" class="addNoticeS" @visible-change="(v) =>selectNotice(v,'展示的提示文案')" >......</el-select>
- visible-change 事件监听下拉框的显示与隐藏
/*** 下拉框 文案提示* @param visible 是否展示* @param notice 文案*/
function selectNotice(visible, notice) {if (visible) {//下拉框出现时，动态创建需要添加的元素$('.el-select-dropdown').append(`<div class='select_addname_line'></div><div class='select_addname'>${notice}</div>`)} else {//关闭时要清空，防止累加$('.select_addname').remove()$('.select_addname_line').remove()}
}
//文案样式
.select_addname{position: relative;max-width: 100% !important;box-sizing: border-box;padding: 14px 2% 20px;color: #909399;
}
//分割线
.select_addname_line{height: 1px;width: 100%;background:#909399 ;transform: scaleY(0.5);
}
为了保证下拉框跟select等宽度需要加一下调
- 加自定义类名addNotice调整最外层popper的样式
- 加类名addNoticeS，动态获取select的宽度
.addNotice{background: #FFF !important;
}
jQuery进行样式调整，保证下拉框跟select等宽
nextTick(() => {let width=$('.addNoticeS').width() + "px"$('.addNotice').css({width})});
