el-table表头动态增加字段,表格滚动条自动滚动到最右侧
- index.vue
//内含表格的子组件,
<editTable
@changeReload="changeReload"
:reload="reload"
></editTable>
methods: {
changeReload() {
this.reload = Math.random();
},
}
- editTable.vue
<el-table
:key="reload"
:data="tableData"
>
//......表格数据
</el-table>
this.tableColumns.push({
//......添加的新的一条数据
});
this.$emit('changeReload'); // 表格表头增加时,表格重新渲染,这样可以将滚动条滚动到最右侧,nextTick才会是最终起效的
//滚动到最右侧
this.$nextTick(() => {
const tableEl = document.getElementsByClassName(
'el-table__body-wrapper'
)[0];
tableEl.scrollTo(tableEl.scrollWidth, 0);
});