Bug Type: Performance
Environment
- Vue Version:
3.3.4 - Element Plus Version:
2.5.0 - Browser / OS:
chrome 123.0.6312.59 - Build Tool:
Vite
Reproduction
Related Component
el-tableel-table-column
Reproduction Link
Element Plus Playground
Steps to reproduce
<template>
<div class="app-container">
<el-card shadow="never">
<div class="table-wrapper">
<el-table :data="test">
<el-table-column align="center" label="图标" width="200">
<template #default="scope">
{{ console.log(123) }}
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</div>
</template>
<script lang="ts" setup name="Pet">
const test = [1]
</script>What is Expected?
希望只打印一次123
What is actually happening?
实际上会先打印一次123，然后再打印4次123
Additional comments
(empty)
6条答案
按热度按时间jjhzyzn01#
新写了一个例子
他会多次执行aa方法，页面上渲染的结果拿到的是最后一次,请在控制台打开查看输出结果
2hh7jdfx2#
看样子是内部的doLayout执行了多次 导致表格多次重新渲染 插槽内函数反复执行
eni9jsuy3#
看样子是内部的doLayout执行了多次 导致表格多次重新渲染 插槽内函数反复执行
有办法解决吗，或是说之后版本修复
kfgdxczn4#
Use the onRenderTriggered hook function to observe the table-body. store.states.columns is responsive, and the internal data changes during rendering, triggering multiple renderings.
使用onRenderTriggered钩子函数对table-body观察。store.states.columns是响应式的，渲染过程中会改变内部的数据，从而触发多次渲染
mi7gmzs65#
Use the onRenderTriggered hook function to observe the table-body. store.states.columns is responsive, and the internal data changes during rendering, triggering multiple renderings.
使用onRenderTriggered钩子函数对table-body观察。store.states.columns是响应式的，渲染过程中会改变内部的数据，从而触发多次渲染
这种情况算正常的吗，如果不正常有解决方案吗
oknwwptz6#
有解决方案了吗，我也遇到了，会影响性能