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";
從上面可已看出,當(dāng)使用ts開發(fā)element-plus項(xiàng)目時(shí)付魔,遇到需要使用ref的情況時(shí)教硫,想要用到組件自身的方法
例如表單的校驗(yàn)時(shí):
ruleFormRef.value!.validate();
完全可以使用element-plus組件自帶的類型別名綁定ref來(lái)調(diào)用組件自身的方法,且不會(huì)出錯(cuò)系奉。
而其類型則是類似以下這種格式的珊燎,圖為引入element-plus單組件的文字惭嚣。
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']