elementUI --- el-select 下拉框右側放提示文字

需求：

1.下拉框右側需要顯示對於備註文字

<el-select v-model="ruleForm.tableName"
           placeholder="請選擇數據表"
           @change="changeDataTable"
           popper-class="step-one">
    <el-option v-for="item in dataTableList"
               :label="item.name"
               :value="item.id"
               :key="item.id">
        <span style="float: left;">{{item.name}}</span>
        <span style="position: absolute; right: 18px; font-size: 12px; color: #8492a6; ">{{ item.type==='view'?'視圖':'表'}}</span>
    </el-option>
</el-select>

問題1：右側會重疊

方案一：

給body外面的下拉框 通過popper-class="step-one"  加一個樣式名稱

//step-one class名稱 與 el-select 中的屬性popper-class="step-one" 對應

.step-one {
    .el-select-dropdown__item {
        padding: 0 50px 0 20px;
    }
}

效果：

 

方案二：

更改 el-select popper-append-to-body 爲false 屬性

使下拉框數據位於el-select內部 在加class 控制樣式