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

相关推荐
昔人'9 分钟前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静5 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者6 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~6 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge7 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再7 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴7 小时前
Lua 模块的完整入门指南
前端·lua
Sheldon一蓑烟雨任平生7 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
浪里行舟8 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1238 小时前
CSS易忘属性
前端·css