el-scrollbar
1 <el-scrollbar ref="scrollbarRef"></el-scrollbar>
1 import type { ElScrollbar } from 'element-plus';
2 const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
3 scrollbarRef.value!.setScrollTop(value)
el-form
1 <el-form ref="ruleFormRef"></el-form>
1 import type { ElForm } from 'element-plus';
2 type FormInstance = InstanceType<typeof ElForm>;
3 const ruleFormRef = ref<FormInstance>();
4 ruleFormRef.value!.resetFields();
el-table
1 <el-table ref="multipleTable"></el-table>
1 import type { ElTable } from "element-plus";
2 const multipleTable = ref<InstanceType<typeof ElTable>>();
3 multipleTable.value!.clearSelection();
el-input
1 import type { ElInput } from "element-plus";
从上面可已看出,当使用ts开发element-plus项目时,遇到需要使用ref的情况时,想要用到组件自身的方法
例如表单的校验时:
1 ruleFormRef.value!.validate();
完全可以使用element-plus组件自带的类型别名绑定ref来调用组件自身的方法,且不会出错。
而其类型则是类似以下这种格式的,图为引入element-plus单组件的文字。
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']