《ElementPlus 与 ElementUI 差异集合》el-select 差异点，如：高、宽、body插入等

已于 2024-04-23 12:00:59 修改
阅读量933 收藏 4
点赞数 10
分类专栏： 《ElementPlus 与 ElementUI 差异集合》 文章标签： elementui 前端 javascript
于 2024-04-23 11:53:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_31213021/article/details/138119233
版权

宽度

Element UI

  • 父元素不限制宽度时，默认有个宽度 207px；

在这里插入图片描述

  • 父元素有固定宽度时，以父元素宽度为准；

在这里插入图片描述

Element Plus

  • 父元素不限制宽度时，默认100%；

在这里插入图片描述

  • 父元素有固定宽度时，以父元素宽度为准；

在这里插入图片描述

高度

ElementUI 和 ElementPlus 的属性 size 有差异，且高度也不同；

Element UIElement Plus
默认40px默认32px
medium36pxlarge40px
small32pxdefault32px
mini28pxsmall24px

下拉框插入body元素

下拉框元素默认放body 元素，可通过属性设置放在 el-select 元素内。且 ElementUI 和 ElementPlus 有差异。

Element UI

popper-append-to-body

在这里插入图片描述

Element Plus

teleported

在这里插入图片描述

结构

两者的内部实现完全不一样了，所以在 ElementUI 上做过样式修改，代码直接拷贝到 ElementPlus 是无效的；

Element UI

在这里插入图片描述

Element Plus

在这里插入图片描述

AvatarGiser
关注
  • 10
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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-...
ElemenPlus与ElementUI
秋书一叶的博客
08-26 8671
Element Plus 是一个基于 Vue.js 的开源 UI 组件库，旨在帮助开发者构建出现代化、美观且高效的 Web 应用程序界面。它是对 Element UI 的进一步发展，专注于提供更好的性能、更丰富的组件以及更好的开发体验。
Element-ui和Element-Plus的区别_Element2和Element3的区别
天马3798
02-04 2万+
Element-ui和Element-Plus的区别_Element2和Element3的区别 一、定义区别 Element-UI对应Element2：基本不支持手机版 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element-Plus对应Element3：组件布局考虑了手机版展示 基于 Vue 3，面向设计师和开发者的组件库 二、框架区别 Element-ui适用于Vue2框架 Element-plus适用于Vue3框架 三、开发中
element-plus 自定义dialog的高度
最新发布
黄彪博客
07-18 733
工作中使用 element-plus 的dialog弹窗，由于内容过多，出现了如下效果， 操作界面的按钮 需要滚动条滑动到底部，才能看到查看elment-plus 相关的API 文档，没有找到可以设置高度的
【前端】Element-UI和Element-Plus的区别
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
06-22 1万+
【前端】Element-UI和Element-Plus的区别
Element UI 及 Element Plus框架
热门推荐
Jim Zheng
11-16 3万+
既然基于Vue，所以可以使用打包工具打包，例如 Vite或WePack。当然Element UI与有React及Angular的版本了。一，何为Element UI 及 Element Plus？二、Element UI 与 Element Plus区别？三、Element UI 与 Element Plus使用。而Element UI是基于Vue 2.目前还处于快速开发迭代中。
el-select改变宽度(非常nice)
qq_40924034的博客
09-11 1万+
1. 设置style="width:100%"与父盒子同宽，改变父盒子的宽度即可 <el-select v-model="value5" multiple placeholder="请选择" style="width:100%"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> &l
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-...
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
ElementUI为el-table元素提供了直接设置高度（height）属性的方法，从而固定表头并实现内容的滚动。在本文中，将会详细探讨如何实现这一功能，并且提供动态监测浏览器高度来设置表格高度的解决方案。 ### ElementUI...
详解如何修改el-select的样式：popper-append-to-body和popper-class
11-21
如何修改elementUI提供的el-select组件的样式 网上有很多关于这个的解决方式： 1、找到下拉框的类名，写个全局样式覆盖掉就行了 2、修改.el-select-dropdown__item的样式 3、通过官网提供的popper-class进行样式修改...
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
<el v-model=level size=mini placeholder=请选择 change=selectChange()> <el v-for=item key=item.value label=item.label value=item.value></el> </el> 我们需要的是选择之后才触发，但是这样写你会发现，页面...
【Vue】Element Plus和Element UI中插槽使用
SqlloveSyn的博客
06-06 1万+
今天和大家讲一下Element Plus和Element UI这两个组件库中表格的插槽使用方法，一般情况下vue2使用Element UI这个组件库，表格组件的插槽的话一般都是使用v-slot，而vue3使用Element Plus组件库，表格组件中插槽一般为#default，下面就来讲一下这两个。以上就是本章的全部内容，自己总结的，可能想法会有不同之处，希望能够帮助到您。
element-ui 解决 el-select 设置默认值后无法切换选项
票票的博客
07-16 3820
原因：select已经绑定了值，render函数没有自动更新，数据刷新了但是视图没有刷新 解决方法：使用this.$forceUpdate()重新render <el-select v-model="ruleForm.region" placeholder="请选择角色" @change="handleSelectChange"> <el-option v-for="item in roleOption" :key="item.id"
Vue3 - Element Plus 选择器 el-select 既可以选择下拉又可以手动输入文本功能，让 select 选择器同时拥有下拉选择和输入文本（支持手动输入文本和下拉选择）
王佳斌
12-02 9286
vue3，element plus，select选择器，el-select，el-select实现可下拉选择和手动输入，element-plus组件库中选择器怎么像输入框一样可以输入，既可以手输也可以选择，el-select可选择可以手动输入，Vue3使用el-select下拉框实现可输入可选择，el-select可新增输入可选择，vue3使用element plus选择器Select既可以下拉选择也可以手动输入，实现el-select可选择/可输入，怎么能让输入框又能选择又能输入文本，既有下拉功能也有输入
【element-plus使用】el-select自定义样式、下拉框选项过长等问题解决
记录
11-29 9549
参考代码：选项的超出部分就会变成...。如果要自定义下拉框的宽度，则可以参考如下代码实现<el-option<style></style>选项的超出部分就会变成...。参考（里面还有种方法是用横向滚动条，但感觉用户体验会不太好,pass）补充：如果不希望选项超出部分变成…，直接都完整展示每个选项。可以参考下面的写法：（我还没试过；是群里uu提供的）
如何更改el-select的宽度
m0_47561027的博客
06-07 8705
外部用一个class类包在外部，这里我取名为a1，我需要更改的是“请选择方式”和“有效时间”select框的宽度，分别用a2,a3包含，这样就可以对特定的el-form-item里面select框值进行修改了，在修改特定el-form中的el-select框的宽度时，如果页面含有多个select框和input框，使用class类包裹，可以更改指定的宽度。使用ElementUI的Layout布局中的栅格布局，利用el-row，el-col，从而限制el-select占用几个部分。
vue3+Element-plus el-select 下拉表格组件（ TSelectTable组件键盘向上/下滚动条根据移动的选择区域而滚动）
wocwin的博客
12-02 1万+
TSelectTable组件键盘向上/下滚动条根据移动的选择区域而滚动）TSelectTable组件新增搜索过滤、翻页选中功能；新增isShowFirstColumn、filterable、reserveSelection三个属性; TSelectTable组件动态赋值默认值回显问题解决及单选默认值修改及新增isClearQuery属性清除查询条件数据；TSelectTable组件新增单选---新增上、下、回车键盘事件；TSelectTable组件新增查询条件
vue3+Element-plus el-select 下拉分页选择 多选增加全选封装组件（TSelect组件新增虚拟列表多选功能及demo示例（即支持el-select-v2）功能）
wocwin的博客
11-27 6765
vue3+element-plus el-select 下拉选择 多选增加全选封装组件2023-09-20 TSelect组件新增自定义显示下拉项label；TSelect组件新增下拉选择分页、虚拟列表（即支持el-select-v2）功能;TSelect组件新增虚拟列表多选功能及demo示例
elementui中当el-select下拉框绑定multiple多选后无法编辑删除
07-15
### 回答1： elementui中的el-select下拉框组件是一个选择器，它可以用来单选或者多选。当我们给el-select组件绑定multiple属性时，它就可以实现多选功能。但是这样绑定multiple属性后，下拉框将不能进行编辑和删除。 实际上，多选的下拉框不提供编辑和删除功能是因为这样的设计逻辑。多选下拉框最多允许用户选择多个选项，而不支持编辑和删除已选中的选项。通过点击下拉框展开选项，用户可以选择自己所需的多个选项，但是不能对已选中的选项进行直接编辑或删除。 如果我们需要对已选中的选项进行修改或删除，可以通过其他方式来实现。比如，可以在多选下拉框的旁边添加一个"编辑"或"删除"的按钮，当用户点击这个按钮时，弹出一个对话框或者列表，用户可以在其中编辑或删除已选中的选项。 总结来说，elementui中的el-select下拉框组件绑定multiple多选后无法直接编辑和删除已选中的选项，但是我们可以通过增加其他操作，比如添加按钮和弹出对话框等，来实现对已选中选项的编辑和删除操作。 ### 回答2： 在Element UI中，el-select下拉框绑定了multiple多选后，无法直接编辑删除选项。这是因为多选的特性要求用户通过勾选或取消勾选选项来进行选择和取消选择，而不是直接编辑删除选项。 如果你想删除已选择的选项，可以通过以下方法实现： 1. 通过v-model指令将已选择的选项绑定到一个数据属性中。例如，将已选择的选项绑定到一个名为selectedOptions的数组属性中。 2. 在页面上，以列表或其他形式展示已选择的选项，并为每个选项提供删除按钮。 3. 当用户点击删除按钮时，触发对应的方法。在方法中，我们可以通过数组的splice方法，根据选项的索引从selectedOptions数组中删除对应的选项。 下面是一个简单的示例： ```vue <template> <div> <el-select v-model="selectedOptions" multiple> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> <ul> <li v-for="(option, index) in selectedOptions" :key="option"> {{ option.label }} <button @click="removeOption(index)">删除</button> </li> </ul> </div> </template> <script> export default { data() { return { options: [ { label: "选项1", value: "option1" }, { label: "选项2", value: "option2" }, { label: "选项3", value: "option3" } ], selectedOptions: [] }; }, methods: { removeOption(index) { this.selectedOptions.splice(index, 1); } } }; </script> ``` 通过以上方法，我们可以实现在el-select的多选模式下删除已选择的选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值