526互联

新增数据后自动滚动到表格底部

发布时间 2023-12-14 13:50:58作者: 伟衙内
<table>
	<thead>
		<tr>
			<th></th>
		</tr>
	</thead>
	
	
	<tbody :ref="indexInfo.index_id" :id="indexInfo.index_id">
		<tr>
			<td></td>
		</tr>
	</tbody>
	
	
</table>

  有上述一个html结构，tbody中的每行数据是新增的，也就是数据是动态的。

  如下图所示，点击新增一行，则增加一行，然后填写数据，但是获取tbody元素后，死活滚动不到最后一行数据，而是只能滚动到倒数第二行数据。

  后来发现，需要等dom节点渲染完成后才滚动，所以要放在 $nextTick  这里面。

addRow(indexInfo, index) {//添加行
    let ths = this;

    let dbValues = {
        db_unit_name: '',
        time_01: this.formData.sta_info.year,
        time_02: this.formData.sta_info.time,
        wd_value: [],
        data_desc: '',
        data_value: '',
    }

    if (!indexInfo.rowValues) {
        indexInfo.rowValues = []
    }

    indexInfo.rowValues.push(dbValues);

    this.$forceUpdate();


    this.$nextTick(() => {
        let tableC = document.getElementById(indexInfo.index_id);
        // tableC.scrollTop = tableC.scrollHeight;
        tableC.scrollTo({'top':tableC.scrollHeight,behavior:"smooth"});
    })
},