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

AvatarGiser

已于 2024-04-23 12:00:59 修改

阅读量955

点赞数 10

分类专栏：《ElementPlus 与 ElementUI 差异集合》文章标签： elementui 前端 javascript

于 2024-04-23 11:53:53 首次发布

本文链接：https://blog.csdn.net/sinat_31213021/article/details/138119233

版权

《ElementPlus 与 ElementUI 差异集合》专栏收录该内容

9 篇文章 0 订阅

订阅专栏

宽度

Element UI

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

在这里插入图片描述

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

在这里插入图片描述

Element Plus

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

在这里插入图片描述

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

在这里插入图片描述

高度

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

Element UI		Element Plus
默认	40px	默认	32px
medium	36px	large	40px
small	32px	default	32px
mini	28px	small	24px

下拉框插入body元素

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

Element UI

popper-append-to-body

在这里插入图片描述

Element Plus

teleported

在这里插入图片描述

结构

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

Element UI

在这里插入图片描述

Element Plus

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AvatarGiser

关注关注

10
点赞
踩
4

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue ElementUI el-select 自定义高度

weixin_41346436的博客

04-29

7210

小小的需求，却没有最好的解决办法，此处分析代码最少，最直观的办法，解决el-select自定义高度问题，文字颜色，边框，统统都可以自定义修改直接上代码就是用[ /deep/ ]这个属性，很给力效果图 <div class="subjectleft"> <el-select v-model="value" placeholder="请选择" class="selsectbox"> <el-option

element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)

01-18

突然发现已经半年没更新的element-ui更新了更新了什么还不清楚，但是告知了基于vue3.x版本的 element-plus 已经出来了。先来上手体验一下首先安装一个最新的@vue-cli，搭建一个vue3.x的项目，脚手架创建流程已经很简洁了，这里就不多说了。建好之后，直接开始安装吧 npm i element-plus 为了方便，直接采取全部引入的方式 src/plugins/element.ts import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.c

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

ElemenPlus与ElementUI

秋书一叶的博客

08-26

8723

Element Plus 是一个基于 Vue.js 的开源 UI 组件库，旨在帮助开发者构建出现代化、美观且高效的 Web 应用程序界面。它是对 Element UI 的进一步发展，专注于提供更好的性能、更丰富的组件以及更好的开发体验。

ElementPlus 中el-select自定义指令实现触底加载请求options数据

热门推荐

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-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-...

elementUI，实现el-select + el-tree组合成下拉树。

weixin_38395200的博客

05-20

5042

elementUI 官网API elementUI 中有Select 选择器，效果是这样的。 Tree 树形控件的效果是这样的。我们在实际开发中需要用到下拉树，elementUI 是没有这个组件的，我们就要自己去写了。下面是我开发中用到的，记录一下el-select + el-tree组合，直接贴代码。 <el-select v-model="baseTableName" class="select-unitName select-option-father" popper-class="se

Vue 中使用 ElementUI 中的 el-select 中的remote-method 如何添加自定义方法？

dyp330的专栏

01-30

1万+

首先认为大家都知道el-select 组件可以支持远程搜索，官网代码 https://element.eleme.cn/#/zh-CN/component/select ，不知道的朋友自行学习哦！ el-select 组件支持远程搜索有一个:remote-method="remoteMethod" 这个方法（官网有代码内容），但是如果需要在单独传一个自定义参数，怎么办呢？需求：把组件放在了 el-table的列中需要把 row的数据传递进去，实现如下： :remote-met...

Vue - ElementUI 下拉选择器 el-select 覆盖修改 placeholder样式，详细解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式）

王佳斌

03-23

3152

vue，vue2，element-ui，el-select，下拉选择器，下拉选择框，Select选择器，修改边框颜色，select去掉边框，vue2+element中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，select弹出样式修改，修改下拉框el-select的样式，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementUI

关于element-plus(vue3)和element-ui(vue2)两个ui框架的不同和使用区别（持续更新）

qq_42119742的博客

12-16

6411

element-ui 关于prop使用多的场景分别是在el-from 和el-tabel 在el-from中的prop属性传值是用于表单校验在el-tabel中的pros是渲染data中的key值在elemen-plus中el-dialog与elenent-ui有何不同在element-ui中的dialog有 :visible.sync属性可进行父子组件之间的双向绑定（vue2写法）具体的写法为：子组件写法 <el-dialog :visible.sync="isShow"> &

Element-plus 与Element 2.x的差异-部分

dyp330的专栏

04-09

2311

一、组件里插槽的书写变化：组件 Element-plus Element 2.x 备注 input 插槽 #append slot="append" 插槽名称没有变化只是写法有差异 input 默认插槽 #default 默认插槽 slot 使用#defaul

【elementUi】与【elementPlus】图标引入的区别，elementPlus图标引入不成功

qq_53478650的博客

02-02

969

前端UI框架Element Plus 和 Ant Design Vue哪个好

06-04

1504

Element Plus 和 Ant Design Vue 都是基于 Vue.js 的 UI 组件库，它们具备一系列可复用的组件和丰富的功能，并且是当前国内主流的两个 UI 组件库。Element Plus 是饿了么前端团队推出的开源项目，是对 Element UI 的升级版。它采用了 TypeScript 编写，提供了一套易于使用、响应式的组件，支持自定义主题、国际化等特性。Element Plus 的设计风格简洁明快，适用于企业级应用界面的构建。

vue3 中Element Plus的el-select 样式(包括更换小图标样式)

Rziziの博客

02-13

3722

vue3 中Element Plus的el-select 样式(包括更换小图标样式)

vue3+Element-plus el-select 下拉表格组件（ TSelectTable组件键盘向上/下滚动条根据移动的选择区域而滚动）

wocwin的博客

12-02

1万+

TSelectTable组件键盘向上/下滚动条根据移动的选择区域而滚动）TSelectTable组件新增搜索过滤、翻页选中功能；新增isShowFirstColumn、filterable、reserveSelection三个属性; TSelectTable组件动态赋值默认值回显问题解决及单选默认值修改及新增isClearQuery属性清除查询条件数据；TSelectTable组件新增单选---新增上、下、回车键盘事件；TSelectTable组件新增查询条件

ElementPlus 之 el-select 多选实现全选功能

都随它大小便吧

05-05

2953

经常会遇到这种多选下拉框支持全选的需求，在此简单记录一下在 ElementPlus 框架下，如何使得多选的 el-select 控件支持实现全选功能。

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的多选模式下删除已选择的选项。