【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,写法有很多,但都是一个意思。

总结

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


相关文章
|
4天前
|
JavaScript
基于Element UI或Element Plus实现具有倒计时的Message消息提示
本文介绍了如何在Element UI或Element Plus框架中实现具有倒计时功能的消息提示组件,支持多次点击生成多个独立倒计时的消息提示,并提供了详细的实现代码和使用示例。
16 1
基于Element UI或Element Plus实现具有倒计时的Message消息提示
|
4天前
|
JavaScript UED
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
该文章介绍了如何基于Vue2.0仿照Element UI的el-tooltip组件实现一个自定义的气泡框组件,该组件能够根据内容是否为空智能显示或隐藏,支持多种数据类型的显示。
13 0
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
|
4天前
|
JavaScript
Element - Vue使用slot-scope和v-for遍历数据为树形表格
这篇文章介绍了在Vue中使用`slot-scope`和`v-for`指令来遍历数据并将其渲染为树形表格的方法。
10 0
Element - Vue使用slot-scope和v-for遍历数据为树形表格
|
4天前
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
18 0
Element UI & Element Plus之改变表格单元格颜色
|
4天前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
5 0
|
4天前
|
JavaScript 容器
Vue+Element UI
该博客文章介绍了如何在Vue中集成Element UI来构建后台管理系统的左侧菜单,包括使用`el-menu`、`el-submenu`和`el-menu-item`等组件,并通过Vue router动态构建菜单项及其路由设置。
|
3天前
|
JavaScript
Vue中如何设置在执行删除等危险操作时给用户提示(二次确认后执行对应的操作)
这篇文章介绍了在Vue项目中如何实现执行删除等危险操作时的二次确认机制,使用Element UI的`el-popconfirm`组件来弹出确认框,确保用户在二次确认后才会执行删除操作。
Vue中如何设置在执行删除等危险操作时给用户提示(二次确认后执行对应的操作)
|
JavaScript 前端开发
vue开发:对Element上传功能的二次封装
最近公司老项目改用vue开发,前端框架采用element ui,这个框架风格还是很漂亮的,只是上传功能有一些问题,比如:limit=1限制上传数量后,后面的添加按钮没有隐藏,再用就是如果上传图片组,很多需求需要对图片组进行排序修改,基于这两个需求,对element的el-upload组件进行了二次封装。
2435 0
|
3天前
|
JavaScript
如何创建一个Vue项目(手把手教你)
这篇文章是一篇手把手教读者如何创建Vue项目的教程,包括使用管理员身份打开命令行窗口、找到存放项目的位置、通过vue-cli初始化项目、填写项目信息、进入项目目录、启动项目等步骤,并提供了一些常见第三方库的引入方法。
如何创建一个Vue项目(手把手教你)
|
3天前
|
前端开发
StringBoot+Vue实现游客或用户未登录系统前、可以浏览商品等信息、但是不能购买商品或者加入购物车等操作。登录系统显示用户的登录名(源码+讲解)
这篇文章介绍了使用StringBoot+Vue实现用户登录状态判断的方法,包括前端加载用户信息和后端设置session的源码示例。