elementUI --- el-select 下拉框右侧放提示文字_element 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 控制样式

本文链接：https://blog.csdn.net/Embrace924/article/details/105389905

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

【手写】数据库关系代数练习题_数据库关系代数例题-程序员宅基地

文章浏览阅读2.3w次，点赞455次，收藏1.5k次。数据库关系代数练习题因为数据库关系代数的特殊符号在电脑上很难输入……所以采用了手写，字不太好看????第一部分第二部分数据库如下：题目如下：第三部分_数据库关系代数例题

Json的JsonValueProcessor方法-程序员宅基地

文章浏览阅读345次。将对象转换成字符串，是非常常用的功能，尤其在WEB应用中，使用JSON lib能够便捷地完成这项工作。JSON lib能够将Java对象转成json格式的字符串，也可以将Java对象转换成xml格式的文档，同样可以将json字符串转换成Java对象或是将xml字符串转换成Java对象。无论出于何种原因，某些时候，我们需要对对象转为字符串的过程加以控制，最常见需求如数值格式化和..._jsonvalueprocessormatcher

【miscellaneous】海康威视监控摄像头实现web端无插件监控实拍效果-程序员宅基地

文章浏览阅读525次。[rtsp]海康威视监控摄像头实现web端无插件监控实拍效果详细介绍参见：http://live.cuplayer.com/RtspCameraLive.htmlweb端无须装插件(支持PC,安卓,IOS苹果系统)效果1 web端无须装插件(支持PC,安卓,IOS苹果系..._海康视频无插件版

运行uniapp跳转微信开发工具后一直卡在微信开发工具首页的解决方法_uni调试工具启动后一直卡在启动页面-程序员宅基地

文章浏览阅读6.4k次。启动uni-app项目后我的微信开发者工具一直卡着不动了在这了_uni调试工具启动后一直卡在启动页面

python输入输出-python输入与输出-程序员宅基地

文章浏览阅读389次。python输出python3中的输出python3中的输出使用函数print()，示例如下：>>> print('hello kitty')print()也可接受多个参数，使用逗号隔开：>>> print('hello','kitty')hello kitty可以看到字符串合并输出后，中间会模式使用逗号隔开~print函数除了可以接收字符串外，也可以接收其他的数据类型>>> print(1) ..._"python输入\"237846278\"和\"4\",输出\"237846278的第4位是6"

HDU 2051 Bitset_hdu 2051 bitset-程序员宅基地

文章浏览阅读502次。/*中文题意：中文翻译：题目大意：解题思路：难点详解：关键点：解题人：解题时间：解题感受：*/_hdu 2051 bitset

随便推点

YOLO算法-程序员宅基地

文章浏览阅读3.6k次，点赞39次，收藏38次。YOLO，全称为You Only Look Once: Unified, Real-Time Object Detection，是一种实时目标检测算法。目标检测是计算机视觉领域的一个重要任务，它不仅需要识别图像中的物体类别，还需要确定它们的位置。与分类任务只关注对象是什么不同，目标检测需要同时处理离散的类别数据和连续的位置数据。YOLO算法基于深度学习的回归方法，它将目标检测问题转化为一个回归问题，使用单个卷积神经网络（CNN）直接从输入图像预测边界框（bounding box）和类别概率。_yolo算法

http post请求方式-程序员宅基地

文章浏览阅读3.9k次，点赞2次，收藏8次。1、HTML < form > 标签的 enctype 属性定义和用法enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码(空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值)。2、form..._http_post submit

波士顿房价预测的TensorFlow实现(多元线性回归)_x_train=tf.cast(scale(x_train),dtype=tf.float32)-程序员宅基地

文章浏览阅读2.6k次。import tensorflow as tfimport numpy as npimport pandas as pdfrom sklearn.utils import shuffle from sklearn.preprocessing import scale import matplotlib.pyplot as plt%matplotlib inline获取数据和查看数..._x_train=tf.cast(scale(x_train),dtype=tf.float32)

欠拟合与过拟合及其解决方法-程序员宅基地

文章浏览阅读7.1k次，点赞5次，收藏33次。一、欠拟合（Underfitting）模型在训练数据上不能获得很好的拟合，并且在测试数据集上也不能很好的拟合数据，这种现象称为欠拟合，即高偏差（high bias）。(模型过于简单)原因：模型不够复杂、拟合函数的能力不足，学习到的有用特征太少，导致拟合的函数无法满足训练集。二、过拟合（Overfitting）模型在训练数据上能够获得很好的拟合，但是在测试数据集上却不能很好的拟合数据..._欠拟合

VC++获取CPU时钟频率_c++获取cpu频率-程序员宅基地

文章浏览阅读2.4k次。先通过执行两条汇编语句得到执行两条汇编语句所使用的相对时间刻度，然后继续执行这两条汇编语句获取一个时间刻度减去先前的相对时间刻度就是CPU时钟频率。inline UINT64 CGetCPUTimeDlg::GetCount(){ _asm _emit 0x0f; _asm _emit 0x31;} // 获取CPU时钟频率CString CGetCPUTimeDlg::..._c++获取cpu频率

c++中 #include 用法解析_c++include-程序员宅基地

文章浏览阅读8.7k次，点赞9次，收藏55次。这里需要注意include的两种不同写法，#include<***.h> 和 #include"***.h"采用"< >"方式进行包含的头bai文件表示让编译器在编译器的预设标准路径下去搜索相应的头文件，如果找不到则报错。例如：VS2008的安装目录\Microsoft Visual Studio 9.0\VC\include下面就包含了标准库的头文件。第二种方式表示先在工程所在路径下搜索，如果失败，再到系统标准路径下搜索。所以，特别要注意的是，如果是标准库头文件，那么既_c++include