由于业务需求(组件封装),需要在获取el-table下面的el-table-column实例

在 vue2.x 当中直接使用this.$children就可以获取到该实例

但是 vue3.x 弃用了$children,官方建议使用$ref获取子组件实例,由于el-table-column是通过插槽形式插入,且当el-table-column数过多时,不可能专门为每一个el-table-column都添加ref,在网上搜索之后发现有人建议使用$slot获取插入的组件实例,但是获取到的实例信息不足,因此决定构造一个“$children”出来

1. 使用$slots

打印$slots

console.log(this.$slots);
// 若是setup需要在setup当中接收slots参数

调用$slots里面的default

(this.$slots as any).default()
// 若是setup需要在setup当中接收slots参数

2. 构造$children

思路:思路很简单,直接在el-table-column挂载时,调用父组件的方法,并传入自身实例即可

  1. 为方便在el-table-column挂载时做处理,封装一下el-table-column
<el-table-column
v-bind="$props"
ref="elColumn"
:sortable="sortable"
:merge="merge"
:merge-by="mergeBy"
:formatter="compatibleFormatter"
v-on="$attrs"
>
<template v-if="$slots.default" #default="scope">
<slot v-bind="scope" />
</template>
<template v-if="$slots.header" #header="scope">
<slot name="header" v-bind="scope" />
</template>
</el-table-column>

在挂载的时候调用父方法

mounted() {
// 获取表格列的配置
this.columnConfig = (this.$refs as any).elColumn?.$?.columnConfig?.value // this.$parent获取到的是el-table组件的实例,this.$parent.$parent才是我们自己写的组件的实例
if (this.$parent && this.$parent.$parent) {
const _this = this;
(this.$parent.$parent as any).setChildrenInstance(_this)
}
}
  1. 在父组件接收实例并存放起来

    新建父组件(简写)
<el-table>
<slot />
</el-table>

接收子组件实例

public childrens: any[] = []

public setChildrenInstance(children: any) {
this.childrens.push(children)
} // 在用的地方调用childrens即可 打印 console.log(this.childrens);

vue3 封装el-table时,构造$children(类式写法)的更多相关文章

  1. 一、JDBC的概述 二、通过JDBC实现对数据的CRUD操作 三、封装JDBC访问数据的工具类 四、通过JDBC实现登陆和注册 五、防止SQL注入

    一.JDBC的概述###<1>概念 JDBC:java database connection ,java数据库连接技术 是java内部提供的一套操作数据库的接口(面向接口编程),实现对数 ...

  2. 自己封装的poi操作Excel工具类

    自己封装的poi操作Excel工具类 在上一篇文章<使用poi读写Excel>中分享了一下poi操作Excel的简单示例,这次要分享一下我封装的一个Excel操作的工具类. 该工具类主要完 ...

  3. 封装获取网络信息Linux—API类

    封装获取网络信息Linux—API类 封装好的库: #ifndef NETINFORMATION_H #define NETINFORMATION_H #include <netdb.h> ...

  4. Android PermissionUtils:运行时权限工具类及申请权限的正确姿势

    Android PermissionUtils:运行时权限工具类及申请权限的正确姿势 ifadai 关注 2017.06.16 16:22* 字数 318 阅读 3637评论 1喜欢 6 Permis ...

  5. Spring-test使用JUnit时,测试类autowired报错,create bean error

    Spring-test使用JUnit时,测试类里面使用autowired会报错, 报create bean error...... 但是controller里面@autowired可以正常运行的. 在 ...

  6. foreach DataTable或Table时要略过第一行。

    昨天有续写一个练习<输入数字动态创建行(二)>http://www.cnblogs.com/insus/p/4916260.html ,最终是需要把数据存入数据库中. 在循环ASP:Tab ...

  7. 为什么要用Hibernate框架? 把SessionFactory,Session,Transcational封装成包含crud的工具类并且处理了事务,那不是用不着spring了?

    既然用Hibernate框架访问管理持久层,那为何又提到用Spring来管理以及整合Hibernate呢?把SessionFactory,Session,Transcational封装成包含crud的 ...

  8. 保存项目文件“XXX.csprj”时出错。类没有注册。

    [出错提示]保存项目文件“XXX”时出错.类没有注册.正在查找具有CLSID的对象:{D9B3211D-E57F-4426-AAEF-30A806ADD397}. [解决办法] 需要安装:MSXML_ ...

  9. js原生设计模式——2面向对象编程之继承—原型继承(类式继承的封装)

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  10. hbase删除table时,显示table不存在

    hbase删除table时,显示table不存在,但是创建table时,显示table存在. 解决方案: 清空zookeeper数据.(重新安装zookeeper)

随机推荐

  1. Java基础|03.基础语法(2)

    Java安全|03.Java基础语法(2) 00x1 单例模式 定义: 单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一 ...

  2. Abp Abp.AspNetZeroCore 2.0.0 2.1.1 Path

    纯手工修改,移除校验代码可调试. 将文件复制到 %userprofile%\.nuget\packages\abp.aspnetzerocore 目录中 替换对应的文件 Abp.AspNetZeroC ...

  3. Android studio应用

    菜单的使用 public class FirstActivity extends AppCompatActivity { @Override protected void onCreate(Bundl ...

  4. 2月21日python程序设计

    Python变量 1.不需要事先声明变量名及其类型,直接赋值即可. 2.强类型编程语言,根据赋值或运算来推断变量类型. 3.动态类型语言,变量的类型也是可以随时变化的. >>>  x ...

  5. 记一次因为关键字OUT 导致的后台"sql injection violation" 报错的问题

    在navicat和mssm中执行用字段别名'out'均没有问题,但是在mybatis里使用就会报 "sql injection violation, syntax error: ERROR. ...

  6. api进阶Day2(低级流)文件流的输出流、读取流。向文件中写入文本数据、读取文件中的字符串、用lambda表达式创建文件过滤器。

    文件流:输出流: package io; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...

  7. antv g6 中自定义tooltip 当有该属性时展示没有时不展示

    getContent(e) { const outDiv = document.createElement('div'); outDiv.style.width = '180px'; outDiv.i ...

  8. 位置式PID和增量式PID

    PID介绍 PID 是 Proportional(比例).Integral(积分).Differential(微分)的首字母缩写:是一种结合比例.积分和微分三种环节于一体的闭环控制算法.PID 控制的 ...

  9. 【omr】linux配置omr识别项目moonlight环境

    最近又做了第n次moonlight的环境配置 moonlight是相对成熟的omr系统 这里记录环境配置的基本步骤 (总的来说主要是用conda新建符合程序要求的python版本 然后装好bazel和 ...

  10. Docker部署Reids单机

    一.Redis镜像拉取 docker pull redis 指定版本 docker pull redis:5.0.8 二.Redis单实例安装 1.创建容器挂在目录 (-p 递归创建目录,上级目录不存 ...