vue+ts对element $refs.xxx.methods的支持

ethanYin
  • 125

最近vue+ts,在使用element的时候,关于ref获取dom执行方法一直没有好的体验,今天感觉绕不开了。
我是为了做一个el-tree的过滤功能,因为以下语句报错,官网过滤不能用。

this.$refs.tree.filter(val);

image.png
界面大概像这样:
image.png
我自己实现了过滤数据,但是有一点就是我想要过滤后自动展开的功能(default-expand-all的值改变页面不响应)要让其展开,网上搜到这样实现

this.$refs.tree.store.nodesMap[data.id].expanded = true;

又避免不了要用$refs,有什么好的解决办法吗?

回复
阅读 3.4k
1 个回答

简单粗暴的是 any 一下:

(this.$refs.tree as any).filter(val);

要强类型支持的话得看你引的这个组件带没带 TS 声明,如果带的话这样处理:

import { Tree } from 'element'; // 伪代码,手头没 element-ui 环境

@Component
export default class Demo extends Vue {
    public $refs!: {
        tree: Tree // 指定 $refs.tree 的类型
    }
 
    doSomething() {
        this.$refs.tree.filter(val); // 正常使用
    }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进