const formRef = ref＜InstanceType＜typeof ElTable＞＞()；报错

最新推荐文章于 2024-11-15 17:56:41 发布

原创最新推荐文章于 2024-11-15 17:56:41 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

异常处理专栏收录该内容

12 篇文章

订阅专栏

博客提及Vue报错内容及对应的解决办法，虽未给出具体信息，但核心围绕Vue报错问题的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上报错内容：

TS2344: Type '{ version: string; install: (app: App<any>, options?: Partial<ConfigProviderProps> | undefined) => vo
id; }' does not satisfy the constraint 'abstract new (...args: any) => any'.
  Type '{ version: string; install: (app: App<any>, options?: Partial<ConfigProviderProps> | undefined) => void; }'
 provides no match for the signature 'new (...args: any): any'.

问题解决：

import ElTable,   {ElMessageBox, FormInstance} from "element-plus";

改成

import  {ElTable, ElMessageBox, FormInstance} from "element-plus";

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhaozuoyou

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

InstanceType获取组件实例类型编译不通过

qq_36016136的博客

04-16

2961

项目场景： Vue3 + TS 后台管理系统问题描述 ref<InstanceType<typeof LoginAccount>>() 代码编译不通过，出现红色下划线。原因分析：在网上浏览帖子，说是要使用defineComponent这个函数包裹默认导出的对象，但事实上我的代码里已经这样做了，但还是编译不通过。后面每行代码看了下，发现我没有标注语言使用ts，在script 标签上写明使用ts语言，即<script lang=“ts”>，编译就没问题了。我还把de

vue3获取ref实例结合ts的InstanceType

动感超人的博客

02-02

2985

有时候我们模板引用,但是在使用的时候,ts提示却不行,没有提示组件通过暴露的方法名称,虽然这不是很影响,但是可以解决还是可以解决下~const sayHello = () => (console.log('我会说hello'))sayHello})然后我们在父级使用,输入完成会发现没有sayHello这个函数提示,所以这个时候我们就需要使用工具类型来获取其实例类型

参与评论您还未登录，请先登录后发表或查看评论

定义子组件的ref类型

qq_59625204的博客

06-19

369

在我们定义子组件时给他一个ref为rightWrapRef,那么我们怎么定义它的数据类型呢？是一个内置的工具类型，用于获取一个类的实例类型。定义如下：InstanceType在TypeScript中，

js 中的 instanceof与typeof区别

lts_apollo的专栏

03-30

420

今日用到js类型判断，网上看了一些文章，对它们之间的关系有了一定的了解。然后记录了下来：instanceof和typeof都能用来判断一个变量是否为空或是什么类型的变量。typeof用以获取一个变量的类型，typeof一般只能返回如下几个结果：number,boolean,string,function,object,undefined。我们可以使用typeof来获取一个变量是否存在，如if(

TS中的InstanceType函数和Typeof 操作符

05-23

1773

【vue中的instanceType用法】父组件用ref获取子组件时，通过 instanceType获取子组件的类型。此外，typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。尽管ES6引入了更清晰的类语法，但从类型检查的角度看，类仍然被视为函数。函数：该函数返回（构造）由某个构造函数构造出来的实例类型组成的类型。操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。获取由某个构造函数构造出来的实例类型组成的类型。操作符可以用来获取一个变量或对象的类型。

const allSelectedIds = ref<Set<string | number>>(new Set()); allSelectedIds 包括关键字

07-20

const tableRef = ref<InstanceType<typeof ElTable>>(); // 数据状态 const tableData = ref<any[]>([]); const allSelectedIds = ref<Set<string | number>>(new Set()); const currentPage = ref(1); const ...

<template> <div class="container">  <div class="container"> <el-table ref="tableRef" :data="tableData" stripe style="width: 100%"> <el-table-column label="排序" width="80"> <template #default="scope"> <el-icon class="drag-handle"><Sort /></el-icon> </template> </el-table-column> <el-table-column prop="id" label="ID" width="120" /> <el-table-column prop="name" label="名称" /> <el-table-column prop="age" label="排序" width="100" /> <el-table-column prop="address" label="地址" /> </el-table> </div> </div> </template> <script setup lang="ts"> import { ref, onMounted, onUnmounted, reactive } from 'vue'; import Sortable from 'sortablejs'; import li from 'linq'; // 定义数据类型 interface TableDataItem { id: number; name: string; age: number; address: string; } const tableRef = ref<InstanceType<(typeof import('element-plus/es'))['ElTable']>>(); const tableData = ref<TableDataItem[]>([ { id: 1, name: '张三', age: 1, address: '北京市朝阳区' }, { id: 2, name: '李四', age: 2, address: '上海市浦东新区' }, { id: 3, name: '王五', age: 3, address: '广州市天河区' }, { id: 4, name: '赵六', age: 4, address: '深圳市南山区' }, { id: 5, name: '钱七', age: 5, address: '杭州市西湖区' } ]); const SourceData = [ { id: 1, name: '张三', age: 1, address: '北京市朝阳区' }, { id: 2, name: '李四', age: 2, address: '上海市浦东新区' }, { id: 3, name: '王五', age: 3, address: '广州市天河区' }, { id: 4, name: '赵六', age: 4, address: '深圳市南山区' }, { id: 5, name: '钱七', age: 5, address: '杭州市西湖区' } ]; onMounted(() => { if (!tableRef.value) return; // 获取表格tbody元素 const tbody = tableRef.value.$el.querySelector('tbody') as HTMLElement; // 初始化Sortable const sortableInstance = new Sortable(tbody, { // handle: '.drag-handle', animation: 150, ghostClass: 'bg-gray-200', onEnd: (evt: Sortable.SortableEvent) => { // 获取拖拽的元素和目标位置的元素 const draggedItem = SourceData[evt.oldIndex]; const targetItem = SourceData[evt.newIndex]; // 交换两个元素的orderId [draggedItem.age, targetItem.age] = [targetItem.age, draggedItem.age]; setTimeout(() => { tableData.value = li .from(SourceData) .orderBy((a) => a.age) .toArray(); console.log('tableData.value', tableData.value); }, 500); } }); }); onUnmounted(() => { // 销毁Sortable实例 // if (state.sortableInstance) { // state.sortableInstance.destroy(); // state.sortableInstance = null; // } }); </script> <style scoped lang="scss"> .container { padding: 20px; max-width: 1000px; margin: 0 auto; } .drag-handle { cursor: grab; color: #909399; padding: 8px; display: inline-block; } .drag-handle:active { cursor: grabbing; } .bg-gray-200 { background-color: #e5e7eb; } </style> 帮我修改此代码实现拖拽完成后按照新的age排序并显示在页面表格内

07-01

const tableRef: Ref<InstanceType<typeof Table> | null> = ref(null) // 初始化拖拽功能 onMounted(() => { if (tableRef.value && tableRef.value.$el) { const tbody = tableRef.value.$el.querySelector('....