【Vue】Element Plus和Element UI中插槽使用_element ui plus-程序员宅基地

文章目录

前言
一、两者的区别
二、组件库
三、具体讲解
总结

前言

今天和大家讲一下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)组件，我们找到自定义表头。
在这里插入图片描述
找到后查看他的代码

我们可以看到el-table就是整个表格组件，里面的el-table-column就是表格中的每一列的数据。
可以看到表格的第三列表头是一个输入框，表格内容是两个按钮，这一列就是下面的代码。
在这里插入图片描述
可以看到的是它将单标签改为了双标签，在标签内进行了插槽操作，我们看到了在template后面有一个#header，这个定义的在表头的插槽，在插槽内有一个input，这个input就是我们所看到表头的哪个输入框。
下面的这个template后面是#default，这个是表格内容进行插槽，后面的scope就是每行的数据，下面的点击事件的参数就是当前行的数据，点击当前行的按钮就会把当前行的数据传过去。
我之前遇到了一个问题，使用的是#default这个进行插槽操作，但是在里面添加了一个按钮不显示，我就用了一下v-slot虽然可以用，但是不建议，可能会出现一些问题，后来我又换了回来，按钮也是显示了，可能是之前出现了一些问题导致的不会显示，所以尽量还是使用#default来进行插槽操作。

二，Element UI
这个组件库的表格也是有一个自定义表头。
在这里插入图片描述
打开代码看一下

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

总结

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

本文链接：https://blog.csdn.net/SqlloveSyn/article/details/131063970

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

元素选择器之排除特定元素_input排他选择器-程序员宅基地

文章浏览阅读2.1k次。需求如下:该搜索框是对整个页面的input检索，但与弹出层中的input冲突博主几经辗转简单处理解决问题，思路如下：排除掉特定class的input。代码如下：$('input:not(.pop)', this.footer()).on('keyup change', function () { if (that.search() !== th..._input排他选择器

使用JAXB进行XML与JavaBean的转换（支持泛型）_jaxb 泛型-程序员宅基地

文章浏览阅读5.6k次，点赞6次，收藏20次。看到别人有个1024的勋章，特意留了一篇在今年的10.24日，看看会不会获得。在日常开发中可能涉及接口之间的相互调用，虽然在现在微服务的理念推广下，很多公司都采用轻量级的JSON格式做为序列化的格式，但是不乏有些公司还是有一些XML格式的报文，最近就在对接某个合作方的时候遇到了XML报文。在JSON报文爽快的转换下很难试用一个一个的拿报文参数，还是希望能直接将报文转换成Bean。接下来就了解到..._jaxb 泛型

python numpy学习笔记_ndarray的位置-程序员宅基地

文章浏览阅读1.2k次。numpy的主要数据对象是多维数组，其中包含相同类型的元素，通常是数字类型，每个元素都有一个索引。使用numpy前通常要导入包。import numpy as np目录类型维度创建运算索引和切片类型numpy的数组被称为ndarray。numpy.array只处理一维数组，而ndarray对象才提供更多功能。a = np.array([[1, 2, 3], [4, 5, 6]])type(a) # <class 'numpy.ndarray'>dtype属性可以获得元素的数_ndarray的位置

我的世界java版gamemode指令_《我的世界》Java版常用指令代码大全！你想要的都在这里了！...-程序员宅基地

文章浏览阅读1.6w次。还在苦于网上找到的一些指令已经不适用了吗？还在苦于有些地方的指令有误吗？还在苦于有些地方整理的指令不够全面吗？那么你来对地方了！小编为大家整理了《我的世界》原版游戏常用的指令，这些基本足以满足各位的基本需求了！大家来一起看看吧！注：表示的是必须输入的部分，[方括号]表示的是可选择性输入的部分基本命令列表命令描述/?/help的替代命令，提供命令使用帮助。/ban + 玩家名字将玩家加入封禁列表。/..._gamemode指令java

Spring Boot 结合shiro做第三方登录验证_shiro 第三方token登录-程序员宅基地

文章浏览阅读1.5w次，点赞3次，收藏3次。Spring Boot 结合shiro做第三方登录验证1、首先，说一下我的具体实现思路。在做spring boot拦截器的过程中，开始我准备用spring security来实现，但是研究了一段时间之后发现spring security的集成度太高，需要修改的东西比较多，而且对它本身的使用方法不是很了解，后来转而使用Apache shiro。由于是第三方登录，是不需要我来验证密码的。最开始，我陷入了_shiro 第三方token登录

labelme UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0xaf in position 227: illegal mult_file "c:\rgzn\labelme-main\setup.py", line 91, in -程序员宅基地

文章浏览阅读1.9k次，点赞4次，收藏4次。[INFO ] __init__:get_config:71 - Loading config file from:C:\Users\xxx\.labelmercTraceback (most recent call last): File .... line 191, in <module> main() File ...., line 145, in main config = get_config(config_file_or_yaml, config_fro_file "c:\rgzn\labelme-main\setup.py", line 91, in main if sys.argv[1] == "re