【Element】el-table-column 使用slot插槽v-if数据更新后没有渲染

这篇博客介绍了在Vue中使用Element-UI时,由于DOM复用导致表格列显示异常的问题。解决方案是在表格列及后续组件上添加`:key`属性,并赋值为`Math.random()`,以避免DOM被复用。这能确保每次渲染时表格列都是唯一的,从而正确显示内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原因是因为表格是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>
..............................

参考博客

Element-UI el-table-column 使用slot插槽 v-if 报错

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值