【个人总结】作用域插槽的二次封装

已于 2022-10-20 21:17:40 修改
阅读量196 收藏
点赞数
分类专栏： 个人总结 文章标签： vue.js mysql 前端
于 2022-10-20 21:12:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42647547/article/details/127435229
版权

在这里插入图片描述

遍历的时候判断是否有插槽名字，没有就用默认插槽，显示默认的文本

scope.row可以拿到每一行的数据

可以通过作用域插槽，将scope.row赋值给row属性

然后在父组件使用插槽的时候，通过 #xxx=“scope” => scope.row 在父组件拿到子组件的数据

在这里插入图片描述

然后就可以在父级对表格里的数据做相应的处理，比如格式化时间，显示按钮等

小管打天下
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-table表格组件中插槽scope.row的使用方法
小柠檬爱编程
04-29 2万+
要实现点击查看显示后端返回的字段并以文字渲染到页面上，就要是使用到插槽，下图是要实现的： <el-table-column label="任职要求" width="100" align="center"> <template slot-scope="scope"> <el-popover placement="b...
elementUI使用卡槽二次封装table(亲测可用)
bigdargon的博客
07-05 264
elemneui使用卡槽二次封装table
解决Vue2.x中二次封装Vue组件时批量继承属性，方法，插槽的方法
Oliver尹的博客
03-08 2331
解决Vue2.x中二次封装Vue组件时批量继承属性，方法，插槽的方法
vue 3.0实现仿elementUI表格组件封装
u013776700的博客
04-24 1485
vue如何封装一个elementUI的表格组件 灵活使用插槽slot实现表格封装 插槽能够实现对内容的分发，但是像elementUI中多个插槽并没有使用具名插槽是如何实现对多个默认插槽处理的，这里就来分享一下经验。 slot插槽默认插槽 首先多个默认插槽，this.$slots中是一个以defaul为key的数组。这样我们就能利用数组来处理多个默认插槽了。 这是我们默认elementUI实现的一个表格父组件和列子组件。 我们看到 一个 el-table中含有三个 el-table-column 子组件，这
element-ui中 table组件的 header具名插槽中数据不响应的问题
web_wp的博客
03-23 1424
解决方式：slot="header" 改为 #header 即可（#为v-slot缩写） <el-table-column label="操作" width="150"> <template v-slot:header>// 或者 #header <strong>（映射总数:{{ tableData.length }}）</strong> </template> <el-table-column/> ...
从组件封装看Vue的作用域插槽的实现
01-21
作用域插槽不是那么直观的一个概念。Vue文档使用了一段描述性的话来解释作用域插槽： 有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽 …… 但是在我们应用的某些部分，我们希望每个独立的待办项...
浅析vue插槽和作用域插槽的理解
10-17
总结来说，Vue插槽是组件之间内容交互的核心机制，而作用域插槽则进一步增强了这种交互，使得数据可以从子组件流向父组件，提供了更灵活的定制化能力。了解和熟练运用插槽和作用域插槽，对于开发高效且可维护的Vue...
Vue作用域插槽实现方法及作用详解
10-15
主要介绍了Vue作用域插槽实现方法及作用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue学习笔记之作用域插槽实例分析
10-15
总结一下，Vue 作用域插槽的主要知识点包括： 1. **插槽（Slots）**：Vue 中用于内容分发的机制，允许父组件向子组件传递内容。 2. **作用域插槽（Scoped Slots）**：扩展了普通插槽的功能，允许父组件控制插入内容...
详解Vue组件之作用域插槽
10-17
主要介绍了Vue组件之作用域插槽，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
基于Element Plus二次封装的表格组件中添加插槽-实现内容自定义
alice9999999的博客
08-07 5094
element表格中具名插槽
VUE slot 插槽失效、不起作用 、 显示失败问题解决
NDSC_L的博客
11-07 2万+
VUE slot 插槽失效、不起作用 、 显示失败问题解决 被 slot 插槽问题折磨了一晚上，一下为总结 **主要分三种： 1、slot 写成了 solt 2、使用的每一个slot都需要一个 template 包裹，且 slot=“名称” 修改为 v-slot:名称，具体解决方法如下 https://blog.csdn.net/weixin_46704556/article/details/118638344 3、slot 里面的name属性不能有大写字母，全改成小写即可** <div i
Element表格二次封装
像一阵风
03-19 489
基础表格（修改表头及移除默认hover事件） <template> <el-table class="table-wrapper" :data="tableData" border style="width: 100%"> <el-table-column align="center" prop="...
今天扒一扒vue插槽slot的一些事，主治插槽不起作用，等问题
Michael_Hzs的博客
03-30 1159
​ 前两天查了插槽的相关资料，发现大部分csdn或者百度的文章都是把官网的一些例子直接复制粘贴过来，来蹭流量。而对我们真正需要解决问题的起不到任何一些作用。当前 其中还是有一些不错的文章的。也不能说全部都是那种照搬。此文章仅用作自己与那些和我朋友一样问题的人做个记录。官方定义：< slot > 元素作为承载分发内容的出口。个人理解：就是在组件中预留了一块地方（使用
Element plus El-Table组件对插槽的二次封装(不会你直接找我)
qq_43351090的博客
02-27 2459
Element plus El-Table组件对插槽的二次封装(不会你直接找我)
vue3 ts element plus table表格二次封装详细步骤。支持单元格内容、表头自定义渲染（支持使用作用域插槽、tsx 语法、h 函数） （附参数、类型详细介绍及基本使用示例）
热门推荐
前台端水师的博客
06-29 2万+
因为最近项目中频繁会使用到table表格，所以基于element plus table 做了一个二次封装的组件。 1. 新增 render 函数，tsx语法渲染自定义列。 如果使用 render 函数自定义列的话，建议你对 vue 的内置 h 函数有一定了解， 当 然也可以使用插槽的方式实现自定义列。 也可以参考下面 `Render函数自定义列`的使用示例。 2. 多级表头渲染、自定义表头
当我们对组件二次封装时我们在封装什么
小王的技术库
10-11 2720
经常的，我们在日常工作中，会使用第三方UI组件库，比如：element-ui、vant-ui、iview、ant-design等等。不管是为了业务考虑还是单纯的为了提高效率，我们会把一些经常用到的组件抽离、封装成公共组件，这样方便我们在不同的地方使用这个组件，减少重复代码的编写。我们把对于第三方组件库的封装称为组件的二次封装，那么这带来有个思考，当我们在二次封装时，我们在封装什么？
vant组件二次封装-下拉刷新列表组件
weixin_42349568的博客
04-11 3109
一，二次封装的组件代码 <template> <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="已为您刷新成功" > <van-list v-model:loading="myLoading" :finished="finished" finished-text="没有更多了" @load="o
vue3 作用域插槽父子封装
最新发布
05-13
Vue 3 的作用域插槽在父子组件之间的传值方式和 Vue 2 是一样的。父组件通过 `v-slot` 或 `slot` 指令来定义作用域插槽，子组件通过 `props` 接收作用域插槽中传递的数据。 下面是一个父组件和子组件分别实现作用域插槽的示例： ```html <!-- 父组件 --> <template> <div> <child-component> <template v-slot:default="slotProps"> <p>{{ slotProps.data }}</p> </template> </child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { name: 'ParentComponent', components: { ChildComponent }, }; </script> ``` ```html <!-- 子组件 --> <template> <div> <slot :data="childData"></slot> </div> </template> <script> export default { name: 'ChildComponent', props: ['childData'], }; </script> ``` 在这个示例中，父组件通过 `v-slot:default="slotProps"` 定义了一个名为 `default` 的作用域插槽，并且将插槽中传递的数据绑定到了 `slotProps` 变量上。子组件中通过 `slot` 标签和 `props` 接收了从父组件传递的数据。 可以看到，父组件和子组件都需要定义一个名为 `data` 的属性来传递数据，这里我们将这个属性分别命名为 `slotProps` 和 `childData`，这是因为在实际开发中这个属性名可能会因为业务需求不同而有所变化。 如果你想封装一个具有作用域插槽的组件，可以在组件的模板中使用 `slot` 标签来定义插槽，并且在组件的 `props` 中定义接收插槽数据的属性。具体实现方法可以参照上面的示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值