el-select标签设置了clearable属性，但是不出现清除按钮 以及el-table合计功能滚动条层级问题

已于 2023-09-15 09:36:36 修改
阅读量2.1k 收藏 4
点赞数 11
文章标签： vue.js 前端 javascript
于 2023-09-14 17:58:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gewenjuan_0309/article/details/132887406
版权

Element - The world's most popular Vue UI framework

问题1：el-select标签设置了clearable属性，但是不出现清除按钮，原因是el-option标签的value属性值为undefined，导致清除按钮不展示。

解决办法：value正确使用接口返回的字段值

问题解决：

问题2.el-table合计功能滚动条层级问题

最近做项目，公司要求在表格中加入“合计”行。查看element文档后使用自定义方法进行添加。添加后页面中，合计行在横向滚动条下方。

导致出现这个问题的原因是：此时的滚动条是表内容的滚动条。而合计行是属于表尾。

解决方法：
这里要的滚动条是整个table的滚动条，所以将表头、表内容、表尾的滚动条设为visible。

完美解决！

Gewenjuan_0309
关注
  • 11
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+elementUI el-select 中 没有加clearable出现一个或者多个×清除图标问题
彤先森的博客
01-18 1019
vue+elementUI el-select组件出现一个或者多个×清除图标问题
element-ui的下拉选择框选中内容无效果，删除无效果
Fray_Zyt的博客
03-11 4393
原理：其实都有生效的，只是页面没有刷新，展现不出来，我们则可通过强制刷新即可，具体代码如下： <el-select style="width: 95px;" v-model="xxx.xxxx" clearable placeholder="请选择" @change="handleChange"> <el-option v-for="item in list" :key="item.index" :label="item.name" :value="item.name">
2024年前端最新若依项目的常见报错以及解决方案(1)，面试三个月找不到工作
最新发布
2401_84411018的博客
05-14 815
前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-K9jXmFeP-1715624755194)]
element input组件常用属性用法
热门推荐
yangfeixiang001的博客
10-09 1万+
在vue项目中肯定会用到element组件库，里面的input组件的用法和常用属性如下： ** 1，type属性：用法跟原生输入框一样，例：type=“text”，type=“password”,进行输入框的类型设置 2，value 或 v-model：用于输入框内的数据进行双向数据绑定，例：value=“name”,或v-model=“name” 3，maxlength属性和minlength属性："maxlength"用于现在输入框最多输入的字符，同理 “minlength” 用于输入框最少输入的字符
el-cascader 加上filterable 和clearable 后出现2个清除icon解决方案
Sindy的博客
07-21 712
el-cascader v-model="citys" @change="handleChange" :options="cityList" collapse-tags clearable filterable placeholder="登录城市" class="login-city" ></el-cascader>
el-select的clearable 属性的应用
guapilixianghe的博客
03-03 1915
是不行的，医生并没有清空，后来查看element-ui的时候看到了它的。那这样我们就可以利用这个属性来解决问题了。
elementui el-cascader 清除级联选择框选中状态
qq_44981128的博客
11-18 1378
<el-cascader ref="cascader" v-model="optionsValue" :options="options" :props="Options" @change="handleChange" clearable> </el-cascader> 重置methods reset (...
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
总之，Vue中的`el-form` 和`el-select` 提供了强大的表单组件功能，通过自定义`el-select` 的下拉框标签，我们可以灵活地构建符合业务需求的表单。在项目开发过程中，深入理解并熟练运用这些组件，能够显著提高开发...
element的el-table中记录滚动条位置的示例代码
10-16
主要介绍了element的el-table中记录滚动条位置的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
element ui select下拉框清空为空字符
qq_46738283的博客
11-15 1639
使用clearable清空选项此时绑定的值是“” 空字符串，要使清空后值为null，需要自己写clear事件。
el-cascade入门学习
qq_40765784的博客
05-16 3393
学习内容 1.el-cascade的使用, 其中v-model对应的是数组，options中的key值固定，若label,value,children,disabled 2.@change方法的方法参数对应选择的级联的value数组 3.:props="{expandTrigger:'hover'}"触碰选项可展示出子选项，无需点击 4.clearable实现清空数据 5.:show-all-levels='false'实现只显示叶子节点值 6.:props="{multiple:true}"实现可以多..
vue design中Select下拉框组件使用clearable清除按钮，无法选中。
苏一恒
07-29 3337
问题复原 vue design原名（iview），在使用Select下拉框组件使用clearable清除按钮，按理说应该是出现一个“小叉”按钮，以提供清除下拉框，但是在我的项目中，鼠标移动到“向下箭头”的时候，小叉按钮消失了，以至于目前是一个非常矛盾的无法选中的状态。 问题解决 删除官方提供的style="width:200px"示例代码，去掉这个Select上的属性，问题解决。 问题分析 或许是因为我应用了iview的栅格系统，导致在某些地方产生冲突，导致了一定的不兼容性，删掉style里的width代
el-select 的 v-model 绑定了一个对象，通过 clearable 清空后类型发生变化
Alan_Walker688的博客
02-26 1398
v-model 中绑定的值是对象类型，给 el-select 添加 clearable 属性后，当点击 `×` 清空选择器中选中的选项后，经过打印发现 v-model 绑定的值的类型由 object 变为了 string。
element-ui 级联选择器el-cascader踩坑
秋实的博客
06-10 2462
el-cascader 级联选择器 下拉选项选中不刷新；数据回显慢；
select组件使用clearable后参数变成undefined
giiiig的博客
06-30 1763
vue写的前端，iviewui里面的下拉框组件，官方文档说clearable可以清空选择，于是用了，但发现，在请求后端接口后，该参数就不传递了，之前传递的是空字符串
表单el-select标签,clearable元素位置未垂直居中
09-08
在Vue中使用el-select标签时，如果想要clearable元素垂直居中，可以通过自定义样式来实现。 首先，在el-select的父元素上添加一个class，比如"select-container"，然后给这个class设置以下样式： .select-container .el-input .el-input__inner { padding: 10px 0; /* 设置上下内边距，使内容相对于容器居中 */ } .select-container .el-input .el-input__suffix { top: calc(50% - 8px); /* 通过设置top属性来使clearable元素垂直居中 */ } 其中，"el-input__inner"是el-select输入框的class，而"el-input__suffix"是clearable元素的class。 将这些样式添加到项目的主要样式文件中，或者在Vue组件内以<style>标签的形式写入，就可以让clearable元素在el-select中垂直居中了。 另外，如果上述方法不能实现垂直居中，也可以使用其他方法来处理，比如通过CSS的flex布局或者设置line-height属性，具体方法根据实际情况调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值