获取表格行数和高度为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('——————————————————测试——————————————————'); } }
执行结果:
为何如此?
因为是渲染之前打印的这个数组,看到的却是渲染后的数据,通俗的讲,就是这个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('——————————————————测试——————————————————'); }) } }
修改后执行结果: