更改 el-option的样式大家都知道加popper-class 嵌套class样式来更改
如果想单独更改el-option的第一个字话用伪元素:first-letter，仅限中文字
这里主要说下，如果单独更改el-option前两个字或者不固定字数的样式
image.png
- 给el-option 加一个beforecontent的class名
<el-option
class="beforecontent"
v-for="(item,index) in lessonList"
:key="index"
:label="item.lessonName"
:value="index">
</el-option>
-
循环li标签下的span加上dom节点属性data-content和需要添加的属性值
image.png
// 课程姓名加样式
createLessonName() {
// 渲染章节名称样式
const array = document.getElementsByClassName('beforecontent');
for (let index = 0; index < array.length; index++) {
const element = array[index];
let type = this.lessonList[index].reopenStatus;
if (type && type !== 0) {
element.childNodes[0].setAttribute(
'data-content',
type === 1 ? '重开 | ' : '被重开 | '
);
// console.log(element.childNodes)
}
}
- 然后利用span伪元素的content属性插入内容为data-content的属性值
attr(X)：定义显示在该选择器之前或之后的选择器的属性。
<style>
.el-select-dropdown__item.beforecontent span::before{
color: orange;
content: attr(data-content);
}
</style>
- el-option已经实现插入变量了，但是el-select 被选中的option个 input里是独立的，要单独加
原理是一样的，但是input是闭合元素不支持伪元素
所以抓取el-select元素 给input前面加上span标签，然后给span标签加伪元素
所以input根据span字体空间padding-left空出位置刘给添加的内容
image.png
// 修改选择课程名样式
changeLessonName() {
const reopenStatus = this.activeLesson.reopenStatus;
// el-select的class名
const parent = document.getElementsByClassName('lesson-select')[0].childNodes[1];
const isSpan = parent.childNodes[1].nodeName;
if (reopenStatus && reopenStatus !== 0) {
let dom;
// 有无span节点
if (isSpan !== 'SPAN') {
dom = document.createElement('span');
dom.className = 'addspan';
parent.insertBefore(dom, parent.childNodes[1]);
}
else {
dom = parent.childNodes[1];
}
console.log(dom);
if (reopenStatus === 1) {
dom.setAttribute('data-content', '重开 | ');
parent.childNodes[2].style['padding-left'] = '37px';
}
else {
dom.setAttribute('data-content', '被重开 | ');
parent.childNodes[2].style['padding-left'] = '50px';
}
}
else {
if (isSpan === 'SPAN') {
parent.removeChild(parent.childNodes[1]);
parent.childNodes[1].style = '';
}
}
}
最后给input加上css就OK了
.lesson-select {
width: 200px;
/deep/ .addspan {
line-height: 28px;
position: absolute;
left: 5px;
&::before {
content: attr(data-content);
color:orange;
}
}
}
以上，
欢迎各位大佬指点
