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

关注

原创最新推荐文章于 2026-08-15 14:07:00 发布 438 阅读 AI 写同款· GEO 优化 ›

Vue Element UI el-table合计行深度定制：单元格合并与样式优化在前端开发中，表格组件是数据展示的核心模块，其定制化能力直接影响用户体验。Element UI的el-table组件通过内置的合计行功能，为数值统计提供了基础支持。然而，当需求涉及复杂的单元格合并、样式深度定制或与固定列布局兼容时，原生API往往力不从心。深入理解表格的渲染原理和DOM结构，成为实现高级定制的前提。通过自定义append插槽，开发者可以完全掌控合计行的HTML结构和样式，实现跨列合并（colspan）等原生不支持的功能，从而满足产品对数据可视化美观度和交互一致性的高要求。这种方案尤其适用于需阅读详情

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