美文网首页
ElementPlus里的类型别名声明及使用

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

作者: 天策上将记录学习的地方 | 来源:发表于2022-02-28 17:49 被阅读0次

    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']
    

    相关文章

      网友评论

          本文标题:ElementPlus里的类型别名声明及使用

          本文链接:https://www.haomeiwen.com/subject/vvnlrrtx.html