vue选择框选择项内容自定义

1.效果图

如下图效果

2.方案一

2.1 需实现以下拼接

2.2 实现代码 （字符串插值）

   <el-form-item label="许可工程名称" prop="programId">
         <el-select v-model="form.programId" placeholder="请输入许可工程                    名称" style="width: 100%;" clearable>
               <el-option style="width: 700px;" v-for="item in ProgramList" :key="item.id" :value="item.id" :label="`${item.programName}---${item.constructCorpName}`">
              </el-option>
         </el-select>
   </el-form-item>

3.方案二

3.1 以1.效果图为例

3.2 代码实现 （嵌套）

<el-form-item label="许可工程名称" prop="programId">
       <el-select v-model="form.programId" placeholder="请输入许可工程名称" style="width: 100%;" clearable>
             <el-option style="width: 700px;" v-for="item in ProgramList" :key="item.id" :value="item.id" :label="item.programName">
                 <span style="float: left;" v-if="item.programName.length > 25">{{ item.programName.substring(0, 24) }}...</span>
                 <span style="float: left;" v-else>{{ item.programName}}</span>
                 <span style="float: right; color: #7f7f7f;">{{item.constructCorpName}}</span>
              </el-option>
        </el-select>
</el-form-item>