【Vue】Element Plus和Element UI中插槽使用

简介: 前言今天和大家讲一下Element Plus和Element UI这两个组件库中表格的插槽使用方法,一般情况下vue2使用Element UI这个组件库,表格组件的插槽的话一般都是使用v-slot,而vue3使用Element Plus组件库,表格组件中插槽一般为#default,下面就来讲一下这两个。

前言

今天和大家讲一下Element Plus和Element UI这两个组件库中表格的插槽使用方法,一般情况下vue2使用Element UI这个组件库,表格组件的插槽的话一般都是使用v-slot,而vue3使用Element Plus组件库,表格组件中插槽一般为#default,下面就来讲一下这两个。

一、两者的区别

Element Plus 和 Element UI 都是基于 Vue.js 的 UI 组件库,其中表格组件都提供了插槽(slot)来自定义表格的内容。但是,Element Plus 和 Element UI 中表格插槽的区别如下:


表格头部插槽

在 Element UI 中,表格头部插槽的名称为 header,可以用来自定义表格的表头内容。而在 Element Plus 中,表格头部插槽的名称为 header-,可以用来自定义表格的表头内容,同时还可以在插槽名称后面添加 column-key 属性来指定该插槽对应的列的 column-key 值。


表格列插槽

在 Element UI 中,表格列插槽的名称为 default,可以用来自定义表格的列内容。而在 Element Plus 中,表格列插槽的名称为 default,可以用来自定义表格的列内容,同时还可以在插槽中使用 row 和 column 参数来获取当前行和列的数据。


表格底部插槽

在 Element UI 中,表格底部插槽的名称为 footer,可以用来自定义表格的底部内容。而在 Element Plus 中,表格底部插槽的名称为 footer-,可以用来自定义表格的底部内容,同时还可以在插槽名称后面添加 column-key 属性来指定该插槽对应的列的 column-key 值。


总的来说,Element Plus 在表格插槽的命名上更加灵活,同时还提供了更多的参数和属性来方便开发者自定义表格的内容。

二、组件库

在使用前我们可以先看一下这两个组件库。

Element Plus:https://element-plus.org/zh-CN/

Element UI:https://element.eleme.cn/#/zh-CN

上面就是组件库的链接,大家有兴趣可以去看看,里面有很多丰富的组件可以使用。

三、具体讲解

一,Element Plus

先打开组件库找到表格(table)组件,我们找到自定义表头。

f94ed47af0584b15bc4af016db0f921a.png173791fdbc1d4458aae0691f367b05a9.png

我们可以看到el-table就是整个表格组件,里面的el-table-column就是表格中的每一列的数据。

可以看到表格的第三列表头是一个输入框,表格内容是两个按钮,这一列就是下面的代码。


92186a981ac04349a5a0581e813c52a4.png

可以看到的是它将单标签改为了双标签,在标签内进行了插槽操作,我们看到了在template后面有一个#header,这个定义的在表头的插槽,在插槽内有一个input,这个input就是我们所看到表头的哪个输入框。

下面的这个template后面是#default,这个是表格内容进行插槽,后面的scope就是每行的数据,下面的点击事件的参数就是当前行的数据,点击当前行的按钮就会把当前行的数据传过去。

我之前遇到了一个问题,使用的是#default这个进行插槽操作,但是在里面添加了一个按钮不显示,我就用了一下v-slot虽然可以用,但是不建议,可能会出现一些问题,后来我又换了回来,按钮也是显示了,可能是之前出现了一些问题导致的不会显示,所以尽量还是使用#default来进行插槽操作。

二,Element UI

这个组件库的表格也是有一个自定义表头。

3c7b83fa27034dfd994477417a20ef03.png

695be1c7b3b541b4864c3981ebc30ca8.png

表格的基本结构都是一样的,表头插槽方法都差不多,内容使用插槽的话就是slot,写法有很多,但都是一个意思。

总结

以上就是本章的全部内容,自己总结的,可能想法会有不同之处,希望能够帮助到您。


相关文章
|
1月前
|
API UED 容器
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
185 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
|
2月前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
135 5
Vue使用element中table组件实现单选一行
|
2月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
1月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
111 0
|
1月前
|
资源调度 JavaScript PHP
Vue3+ element plus 前后分离admin项目安装教程
Vue3+ element plus 前后分离admin项目安装教程
41 0
|
3月前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
115 0
|
3月前
|
JavaScript 前端开发 开发者
决战前端之巅!Element UI与Vuetify谁才是Vue.js组件界的霸主?一场关于颜值与实力的较量!
【8月更文挑战第30天】本文对比了两款热门的Vue.js组件库——Element UI与Vuetify。Element UI由饿了么团队打造,提供多种高质量UI组件,设计简洁大方。Vuetify基于Material Design规范,支持Vue.js 2.0及3.0版本,具备前瞻性。两者均涵盖表单、导航、数据展示等组件,Element UI配置选项丰富,而Vuetify则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
260 0
|
JavaScript 前端开发
vue开发:对Element上传功能的二次封装
最近公司老项目改用vue开发,前端框架采用element ui,这个框架风格还是很漂亮的,只是上传功能有一些问题,比如:limit=1限制上传数量后,后面的添加按钮没有隐藏,再用就是如果上传图片组,很多需求需要对图片组进行排序修改,基于这两个需求,对element的el-upload组件进行了二次封装。
2453 0
|
7天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
7天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。