获取表格行数和高度为0的原因及解决方法-vue填坑

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/pippa134679/article/details/83820033

vue真的坑太多！虽然入门简单易上手，但是，大项目真的不建议使用此框架，分分钟刷新世界观，很多生命周期问题、加载问题、传值问题、监听问题……
能填一个是一个，能救一人是一人，特意写篇标题明显的，希望能一下就被检索到。

表格存在且有内容，行数可被打印出来，但是获取到的行数和高度却为0。
代码：

methods: {
   aaa () {
        console.log('——————————————————测试——————————————————');
        console.log('表格html：', this.$refs.abc);
        console.log('表格.rows：', this.$refs.abc.rows);
        console.log('表格.rows.length：', this.$refs.abc.rows.length);
        console.log('表格.offsetHeight：', this.$refs.abc.offsetHeight);
        console.log('——————————————————测试——————————————————');
   }
}

执行结果：

为何如此？

因为是渲染之前打印的这个数组，看到的却是渲染后的数据，通俗的讲，就是这个dom结构还没加载完，js就执行了。

如何解决？

等dom结构加载完成后再去获取这个数组。
vue等待渲染完执行的函数： vm.$nextTick(function({console.log(…)}))

修改后代码：

methods: {
   aaa () {
        this.$nextTick(() => {
             console.log('——————————————————测试——————————————————');
             console.log('表格html：', this.$refs.abc);
             console.log('表格.rows：', this.$refs.abc.rows);
             console.log('表格.rows.length：', this.$refs.abc.rows.length);
             console.log('表格.offsetHeight：', this.$refs.abc.offsetHeight);
             console.log('——————————————————测试——————————————————');
        })
   }
}

修改后执行结果：