ElementPlus里的类型别名声明及使用

el-scrollbar

<el-scrollbar ref="scrollbarRef"></el-scrollbar>
import type { ElScrollbar } from 'element-plus';
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
scrollbarRef.value!.setScrollTop(value)

el-form

<el-form ref="ruleFormRef"></el-form>
import type { ElForm } from 'element-plus';
type FormInstance = InstanceType<typeof ElForm>;
const ruleFormRef = ref<FormInstance>();
ruleFormRef.value!.resetFields();

el-table

<el-table ref="multipleTable"></el-table>
import type { ElTable } from "element-plus";
const multipleTable = ref<InstanceType<typeof ElTable>>();
multipleTable.value!.clearSelection();

el-input

import type { ElInput } from "element-plus";

从上面可已看出,当使用ts开发element-plus项目时,遇到需要使用ref的情况时,想要用到组件自身的方法
例如表单的校验时:

ruleFormRef.value!.validate();

完全可以使用element-plus组件自带的类型别名绑定ref来调用组件自身的方法,且不会出错。
而其类型则是类似以下这种格式的,图为引入element-plus单组件的文字。

ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容