在开发动态表单和动态表格的时候,更改某些条件(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