获取表格行数和高度为0的原因及解决方法-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('——————————————————测试——————————————————');
        })
   }
}

修改后执行结果：