【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>
..............................

參考博客

Element-UI el-table-column 使用slot插槽 v-if 報錯


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM