Vue ElementUI el-select的option单独修改前两个字样式

更改 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;
          }
        }
      }

以上，
欢迎各位大佬指点

Vue ElementUI el-select的option单独修改前两个字样式

推荐阅读更多精彩内容