欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-22 23:33:05
获取表格行数和高度为0的原因及解决方法-vue填坑 表格存在且有内容,行数可被打印出来,但是获取到的行数和高度却为0。 代码: methods: { aaa ()...

获取表格行数和高度为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('——————————————————测试——————————————————');
   }
}

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

为何如此?
因为是渲染之前打印的这个数组,看到的却是渲染后的数据,通俗的讲,就是这个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('——————————————————测试——————————————————');
        })
   }
}

修改后执行结果:
获取表格行数和高度为0的原因及解决方法-vue填坑