ElementPlus-Table表格-单选--TypeScript进阶篇

        今天看个例子,这个例子是ElementPlus的组件Table表格下面的单选

<template>
  <el-table
    ref="singleTableRef"
    :data="tableData"
    highlight-current-row
    style="width: 100%"
    @current-change="handleCurrentChange"
  >
    <el-table-column type="index" width="50" />
    <el-table-column property="date" label="Date" width="120" />
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column property="address" label="Address" />
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="setCurrent(tableData[1])">Select second row</el-button>
    <el-button @click="setCurrent()">Clear selection</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElTable } from 'element-plus'

interface User {
  date: string
  name: string
  address: string
}

const currentRow = ref()
const singleTableRef = ref<InstanceType<typeof ElTable>>()

const setCurrent = (row?: User) => {
  singleTableRef.value!.setCurrentRow(row)
}
const handleCurrentChange = (val: User | undefined) => {
  currentRow.value = val
}
const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

        注意到<script lang="ts" setup>,这个lang=”ts“表明其中的脚本解释会使用TypeScript。

        然后再看const singleTableRef = ref<InstanceType<typeof ElTable>>()这行,typeof ElTable表明会返回一个叫做ElTable名字的东西的类型,typeof类型运算符是JavaScript在表达式上下文中使用的运算符。typeof ElTable有可能会获得父类类型,那最终实例化的类型呢?

        答案就是由InstanceType<Type>这个工具类型来获得最终实例化的类型。构造一个由 Type 中的构造函数的实例类型组成的类型。那么InstanceType<typeof ElTable>>就是得到<el-table
    ref="singleTableRef">...</el-table>这个组件的类型。

        ref是一个泛型函数,能捕获参数类型的函数,表现得能接收多种类型参数的函数。ref<InstanceType<typeof ElTable>>(),这样写就表明ref现在是接收<el-table
    ref="singleTableRef">组件类型的参数的函数

        最终写成const singleTableRef = ref<InstanceType<typeof ElTable>>(),那么就表示singleTableRef是接收<el-table
    ref="singleTableRef">组件类型的参数的函数返回的对象

        最后我们再看看如下方法

const setCurrent = (row?: User) => {
  singleTableRef.value!.setCurrentRow(row)
}

        row?: User表示row参数可能存在,也可能不存在,参数类型是User。

        singleTableRef.value!这样写表明接收<el-table
    ref="singleTableRef">组件类型的参数的函数返回的对象的value值不能是null或者undefined,!在这里是个非空断言运算符

        ElementPlus是基于vue3写的UI框架,而vue3是用TypeScript写的javascript框架,在ElementPlus中既可以写vue3,也可以写TypeScript

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/57174.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索C嘎嘎:模版初阶

前言&#xff1a; 小编在前文讲述了C的内存管理&#xff0c;下面我们来开始继续探索C&#xff0c;开启C又一个重要的内容&#xff0c;模版初阶的详解&#xff0c;代码时间到&#xff01; 目录 1.泛型编程 1.1.引子 1.2.泛型编程 2.函数模版 2.1.函数模版的概念 2.2.函数模版的格…

基于知识图谱的电子元器件问答系统

你还在为寻找电子元器件的相关信息头疼吗&#xff1f;作为一名程序员或电子工程师&#xff0c;在项目中经常需要快速查询电子元件的属性或关联关系。今天给大家介绍一个可以大大提升工作效率的神器——基于知识图谱的电子元器件问答系统。这不仅是你学习和工作的好帮手&#xf…

解读华为云Kuasar多沙箱容器技术,带来更强隔离性和安全性

摘要&#xff1a;沙箱技术的引入&#xff0c;为容器提供了更强的隔离性和安全性&#xff0c;成为云原生技术的重要组成部分。 本文来源 《华为云DTSE》第五期开源专刊&#xff0c;作者&#xff1a;华为云云原生开源团队研发工程师。 近年来&#xff0c;云原生容器技术飞速发展&…

1.5 ROS架构

到目前为止&#xff0c;我们已经安装了ROS&#xff0c;运行了ROS中内置的小乌龟案例&#xff0c;并且也编写了ROS小程序&#xff0c;对ROS也有了一个大概的认知&#xff0c;当然这个认知可能还是比较模糊并不清晰的&#xff0c;接下来&#xff0c;我们要从宏观上来介绍一下ROS的…

详解Java之异常

目录 防御式编程 捕获异常 基础语法 示例1 【不处理异常】 示例2 【使用try catch捕获异常】 示例3 【catch只能处理对应的异常】 示例4 【catch可以有多个】 示例5 【可以用一个catch捕获所有异常】 示例6 【finally一定会执行】 示例7 【使用try回收资源】 示例8 …

【iOS】YYModel

目录 什么是YYModel &#xff1f; 如何使用YYModel &#xff1f; 最简单的Model 与网络请求结合 属性为容器类的Model 白名单和黑名单 Model的嵌套 结语 什么是YYModel &#xff1f; YYModel是一个用于 iOS 和 macOS 开发的高性能的模型框架&#xff0c;主要用于对象和…

Lua条件语句

软考鸭微信小程序 过软考,来软考鸭! 提供软考免费软考讲解视频、题库、软考试题、软考模考、软考查分、软考咨询等服务 在Lua编程语言中&#xff0c;条件语句是控制程序执行流程的关键工具。它们允许开发者根据特定条件的真假来执行不同的代码块&#xff0c;从而实现复杂的逻辑…

STM32+DHT11温湿度传感器(含完整代码)

DHT11是一款常用的数字温湿度传感器&#xff0c;它通过单总线与微控制器通信&#xff0c;输出数字信号&#xff0c;使得数据采集和处理变得简单。本文将详细介绍如何使用STM32微控制器驱动DHT11传感器&#xff0c;并提供完整的代码实现。 DHT11传感器简介 DHT11传感器包含一个…

MYSQL的SQL优化

SQL优化是提高数据库查询性能的核心步骤&#xff0c;尤其在处理大规模数据时&#xff0c;SQL查询优化至关重要。优化的目标是减少查询执行时间、降低数据库服务器负载&#xff0c;并使系统在高并发场景下运行更加高效。SQL优化涉及从数据库设计、索引使用、查询重构、配置参数调…

鸿蒙网络编程系列24-Web组件与应用互操作示例

1. APP内嵌网页与应用互操作概述 在通常的APP开发中&#xff0c;经常会采用内嵌网页的形式&#xff0c;通过网页来展现丰富的动态内容&#xff0c;虽少了很多原生开发的功能&#xff0c;但是这么做无可厚非&#xff0c;毕竟APP需要适配的系统平台很多&#xff0c;比如安卓、苹…

mysql 主从安装

登录看第二篇 WINDOWS系统搭建MYSQL 8.0主从模式_windows mysql8.0.34主从配置-CSDN博客 Windows下MySQL8.0最新版本超详细安装教程_windowsserver安装mysql8.0-CSDN博客 启动两个服务 可执行文件路径一致问题解决&#xff1a; windows&#xff0c;同一台机器安装两个mysq…

【HarmonyOS NEXT】权限申请及应用设置页跳转

关键词&#xff1a;鸿蒙、程序访问控制、定位、应用详情页、startability、want 在app开发过程中&#xff0c;常进行系统权限的申请以提供设备访问或个性化功能&#xff08;如扫一扫、城市定位、剪贴板等&#xff09;&#xff0c;从而保障应用功能的完整性&#xff0c;那么本期…

Jupyter notebook和Conda使用

Jupyter notebook和Conda使用 文章目录 Jupyter notebook和Conda使用AnacondaJupyter notebook简介页面使用技巧编写格式自动补全查看函数文档魔术命令远程访问交互式 Anaconda Anaconda是一个开源的Python发行版本&#xff0c;其包含了conda、Python等180多个科学包及其依赖项…

stm32实现esp8266连接到TCP服务器(二)未完

1.2 连接到TCP Server 1.2.1 使用网络助手&#xff0c;设立TCP服务器 ​ 编辑 1.2.2 连接服务器 ATCIPSTART"TCP","192.168.1.18",8080 //指令&#xff0c;注意双引号逗号都要半角(英文)输入 CONNECT //结果&#xff1a;成功 OK //结果&#xff1a;成功 …

jmeter中用csv data set config做参数化2

在jmeter中&#xff0c;使用csv data set config进行参数化是很重要的一个功能&#xff0c;但是这个功能的使用需要十分仔细和小心&#xff0c;因为细节之处往往决定着结果的正确与否。 举例&#xff1a; 一个登录接口用加密密码登录&#xff0c;一个登录接口用原始密码登录。…

STM32G4系列MCU的低功耗模式介绍

目录 概述 1 认识低功耗模式 1.1 低功耗模式的应用 1.2 低功耗模式介绍 2 低功耗模式的状态关系 2.1 低功耗模式可能的转换状态图 2.2 低功耗模式总结 3 运行模式 3.1 减慢系统时钟 3.2 外围时钟门控 3.3 低功耗运行模式&#xff08;LP运行&#xff09; 概述 本文主…

JavaFx学习--chapter02(网络对话)

chapter02(网络对话) 简单网络对话程序 设计任务&#xff1a;客户端向服务器发送字符串&#xff0c;并能读取服务器返回的字符串。 知识点&#xff1a;TCP套接字技术&#xff0c;C/S软件架构程序设计 重点理解&#xff1a;Java客户套接字类Socket和服务器套接字类ServerSoc…

蜜罐技术的出现究竟影响了什么

自网络诞生以来&#xff0c;攻击威胁事件层出不穷&#xff0c;网络攻防对抗已成为信息时代背景下的无硝烟战争。然而&#xff0c;传统的网络防御技术如防火墙、入侵检测技术等都是一种敌暗我明的被动防御&#xff0c;难以有效应对攻击者随时随地发起的无处不在的攻击和威胁。蜜…

linux线程 | 同步与互斥 | 互斥(下)

前言&#xff1a;本篇文章主要讲述linux线程的互斥的知识。 讲解流程为先讲解锁的工作原理&#xff0c; 再自己封装一下锁并且使用一下。 做完这些就要输出一堆理论性的东西&#xff0c; 但博主会总结两条结论&#xff01;&#xff01;最后就是讲一下死锁。 那么&#xff0c; 废…

什么是 Idempotence 以及它在哪里使用?

大家好&#xff0c;我是锋哥。今天分享关于【什么是 Idempotence 以及它在哪里使用&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; 什么是 Idempotence 以及它在哪里使用&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Idempotence&am…