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);
});
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?