＜el-select/＞display设置成none后设置成inline等其他属性无法显示的问题

最新推荐文章于 2023-05-16 17:45:02 发布

立志成为架构师

最新推荐文章于 2023-05-16 17:45:02 发布

阅读量1.1k

点赞数

文章标签： html5 vue elementui

本文链接：https://blog.csdn.net/qq_43527397/article/details/119999794

版权

使用ELEMENTUI select组件时,如果使用display直接作用在组件节点上,一旦设置成none后，会破坏组件原本的属性，即使后面设置成inline等其他可显示属性，也无法显示。正常做法：在想要设置显示/隐藏的组件外添加一层<div></div>,然后通过设置div的display控制组件的隐藏和显示，在select组件中不做display的设置。

  <div  id="labelId" style="display:none">
  <el-select
  v-model="select_label_value"
  multiple
  size="mini"	
  placeholder="已选择的标签">
</el-select>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

立志成为架构师

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

el-autocomplete远程搜索使用及el-upload上传多个文件流给后端，详情接口返回的是文件地址，前端将文件地址转成文件流，回传文件流给后端

qq_37635012的博客

01-04

1455

最近遇到一个项目，里面有2个需求我觉得挺常见的，第一个需求是一个表单里，当用户在输入名称后，前端调接口发请求获取到关联名称的企业名称，并展示，然后当用户选中企业后，前端调接口获取选中企业的具体信息，并填充到表单里；第二个需求是，表单里有个上传图片的功能，前端需要在用户点击保存的时候，前端调保存接口将文件流随表单数据一起以formData格式传给后端存起来，如下图，用户在名称输入框输入“武汉”两个字后调接口获取到的数据如下有“武汉市花木有限公司”、“武汉大学”等，当用户选中“武汉大学”后会将接口返回的信息回显

jQuery Mobile 控制 select 的显示隐藏 display none

klicky的专栏

05-07

723

https://www.cnblogs.com/zuike/p/3358458.html

参与评论您还未登录，请先登录后发表或查看评论

element el-tooltip 不显示

XXXTENTACIONXXXX的博客

05-16

901

这个问题通常是因为我需要显示的内容有v-if之类的判断所以在外层包一个盒子加上一样的判断就可以了。也有人说在el-tooltip 写同样的判断不过我试了一下不好用所以就不写上去了。

element UI中使用tooltip组件，当里边的按钮设置disabled后，tooltip不显示问题的解决方法

cxwy_ing的博客

01-12

5472

element UI中使用tooltip组件，当里边的按钮设置disabled后，tooltip不显示问题解决问题：当el-button设置了disabled为true时，发现鼠标放上去不显示提示信息了。 <el-tooltip content="提示信息" placement="top-start" > <el-button type="text" disabled="true" >删除</el-button&gt

el-tooltip无法显示的问题

weixin_43882265的博客

07-26

6119

组件一定要加，否则表格中无法显示该列的值；这样写，无论是否刷新页面都会显示tooltip，问题解决。标签的里面，给显示值{{tableScope.row.name}}外面加一个。因为该表格中该列的实例名是超链接，且该超链接组件是我们自己封装的，代码如下。组件加了一个key属性，该属性的值toRender是变化的，Js中每。需要在表格中的实例名上添加鼠标悬停显示tooltip的效果；但是只要页面手动刷新，该tooltip就无法显示了。一次，该toRender值就+1，保证每次。...

ElmentUI el-tooltip组件打包后不显示，开发时正常

m0_47005349的博客

07-16

438

原因： <el-tooltip> <span></span> </el-tooltip> 例如：若上述标签内的子标签`span`使用了v-if, 则`el-tooltip`也要使用v-if，注：v-if的判断条件无需一致 eg：错误写法： <el-tooltip> <span v-if="true"></span> </el-tooltip> 正确写法： <el-tooltip v-if="1

<main-content :ifDetail="true"> <div class="two-side"> <div class="main-left"> <el-form :model="form" :rules="rules" ref="form" label-width="120px"> <el-form-item label="选择下载模块" prop="accountName"> <el-input v-model.trim="form.accountName" :maxlength="50"></el-input> </el-form-item> <el-form-item label="倾斜度"> <el-slider v-model.number="form.rotate" :min="-180" :max="180"></el-slider> </el-form-item> <el-form-item label="文字"> <el-input type="textarea" v-model="form.text"></el-input> </el-form-item> <el-form-item label="文字大小"> <el-input-number v-model.number="form.fontSize" :min="10" :max="50"></el-input-number> px </el-form-item> <el-form-item label="位置"> <el-select placeholder="请选择位置" v-model="form.alignment"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> <el-form-item> <el-select v-if="form.alignment === 2" placeholder="请选择位置" v-model="form.textPosition"> <el-option v-for="item in textPositionOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </el-form-item> </el-form> {{ watermarkStyle }} </div> <div class="main-right" id="show"> <div class="watermark"> <span :style="watermarkStyle" ref="showText" style="word-break:break-all;display: inline-block">{{ form.text }}</span> </div> </div> </div> </main-content> 左边来控制右边div里水印展示，代码怎么写

最新发布

06-02

您可以在 `<el-form>` 标签上绑定 `@input` 事件，当表单数据发生改变时，触发该事件，然后在事件处理函数中计算出水印的样式，并将样式绑定到 `<span>` 标签上。具体实现代码如下： ``` <template> <main-content...

el-select下拉框内展示el-tree结构

qq_45110882的博客

07-19

2090

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

调用自定义的 el-tree-select (elementUI)

羊咩咩

09-18

1398

在一个公共处写下自己的树结构,以及事件 <template> <el-tooltip class="item" effect="dark" :disabled="isEmpty(labelText)" placement="top-start"> <div slot="content">{{ getTooltipStr(labelText) }}</div> <el-select v-model="labelText"

el-select组件：当选项的内容很长的时候，如何出现横向滚动条问题 && “无数据“不展示

joe_324的博客

05-14

1309

<el-select size="mini" v-model="form.notesLinkName" :popper-append-to-body="false"... #app .el-select-dropdown { max-width: 500px; left: 0 !important; } #app .el-select-dropdown__item { display: inline-block; } #app .el-select-dropdown__item span

使用v-if控制el-tooltip显隐时，el-tooltip不显示问题

weixin_45749016的博客

07-04

1347

v-if影响el-toopltip得效果

动态添加的遮罩层，第一次执行display:none有效，当再次执行的时候失效

感恩、奋进、自信

03-04

2517

在js中动态给页面添加遮罩层，当点击“是”按钮的时候，遮罩层消失，还停留在当前页面，当点击“否”按钮的时候，则跳转到别的页面问题：当第一次执行点击“是”按钮的时候，遮罩层会消失；第二次点击“是”按钮的时候，代码有执行，但是遮罩层没有消失 js部分代码： //点击提示框的“是“按钮事件，将添加的背景和提示框从body中移出 clickYesBtn = function(){

el-select去掉滚动条

qq_45021462的博客

09-08

2624

主要原因是下拉框el-select-dropdow和app是同级，所以写在局部样式里面没有效果。未来不全局污染，select组件中，提供了一个popper-class属性（element-select），所以给select组件加上这个属性，就可以咋这个类下修改样式了。 <el-select v-model="type" popper-class="remove-scrollbar" placeholder="请选择" > <el-option

select option里面的下拉根据实际情况显示隐藏。写display:none为什么不隐藏呢？

肖肖肖丽珠的博客

03-11

1257

题型，我想让复合题。根据接口给的数据判断是隐藏还是显示 <select name="questiontype" lay-verify="" data-role="questiontypelist" lay-filter ='Tsquestiontype'> <option value="">题型</opti...

关于display：none的恢复问题或取消display：none属性