vue + element-ui 动态表单 动态表格渲染问题

在开发动态表单和动态表格的时候，更改某些条件(v-if 等等)进行重新渲染时候，元素复用出现渲染问题

vue element传的值报_self.$scopedSlots.default is not a function

 

源码

<el-table
        ref="table"
        class="table szq-table"
        border
        :key="inspectionType"
        :url="asyncTable.url"
        async-type="post"
        tooltip-effect="dark"
        height="100%"
        style="width: 100%"
        :json-reader="asyncTable.asyncResponseReader"
        :params="asyncTable.params"
        :ajax-promise="asyncTable.promise"
        @load-success="loadSuccess"
        @selection-change="selectionGrid"
      >
        <div slot="empty" class="emptyTable">
          <div>
            <img src="../../../assets/images/noInfo.png" alt>
          </div>
          <p v-if="noInfoOnOff">{{ $t('noData') }}</p>
          <p v-if="noSearchDataRule">{{ $t('noSearchDataRule') }}</p>
        </div>
        <template v-for="(column, index) in columns">
          <el-table-column v-if="column.type === 'selection'" :type="column.type" :width="column.width"></el-table-column>
          <el-table-column v-else-if="column.type === 'index'" :type="column.type" :label="column.label" :width="column.width"></el-table-column>
          <el-table-column v-else-if="column.prop === 'name'" :label="column.label" :prop="column.prop" :render-header="tableHead" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="jump(scope.row)"
                class="showNameBtn"
              >{{ scope.row.name }}</el-button>
            </template>
          </el-table-column>
          <el-table-column v-else-if="column.prop === 'inspectionResult'" :label="column.label" :prop="column.prop" :render-header="tableHead" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>正常</span>
            </template>
          </el-table-column>
          <el-table-column v-else-if="column.prop === 'operation'" :label="column.label" :prop="column.prop" :width="column.width" :render-header="tableHead">
            <template slot-scope="scope">
              <el-button class="is-icon" type="iconButton" size="small" :title="'巡检'" @click="inspection(scope.row)">
                <icon class="svgPt" viewBox="0 0 24 24" name="h-icon-inspection"></icon>
              </el-button>
              <el-button class="is-icon" type="iconButton" size="small" :title="'巡检历史'" @click="inspectionHistory(scope.row)">
                <icon class="svgPt" viewBox="0 0 16 16" name="h-icon-trashcan"></icon>
              </el-button>
              <el-button class="is-icon" type="iconButton" size="small" :title="'删除'" @click="del('single', scope.row)">
                <icon class="svgPt" viewBox="0 0 16 16" name="h-icon-trashcan"></icon>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column v-else :label="column.label" :prop="column.prop" :render-header="tableHead" show-overflow-tooltip></el-table-column>
        </template>
      </el-table>

解决方法

1. （个人推荐）加上不同的key： 在相同的父节点下，子节点根据key值不同，重新渲染的时候不会复用元素，所以重新渲染不会出现复用问题

2. 判断条件使用 v-show

参考文档