【Element】el-table-column 使用slot插槽v-if数据更新后没有渲染
原因是因为表格是element-ui通过循环产生的,而vue在dom重新渲染时有一个性能优化机制,就是相同dom会被复用,通过key去标识一下当前行是唯一的,不许复用,就行了。
在其和其之后的一个显示的组件上添加 :key="Math.random()"
<el-table-column
:label="$t('customer.name')"
prop="name"
:show-overflow-tooltip="true"
v-if="showColumn('Name')"
:sort-orders="['descending', 'ascending']"
:key="Math.random()"
>
<template slot="header">
<span>{{ $t('customer.name') }}</span>
<span
class="icon-wrapper"
v-if="isSortable('customerName')"
@click="handleSortTable('customerName')"
>
<svg-icon
iconClass="caret-bottom"
v-if="sortProp === 'customerName' && sortOrder === 'ascending'"
/>
<svg-icon
iconClass="caret-top"
v-else-if="
sortProp === 'customerName' && sortOrder === 'descending'
"
/>
<svg-icon v-else iconClass="caret-null" />
</span>
</template>
..............................
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通