前言:
今天在弄一个弹窗表格功能时,发现只要点开某一行数据的弹窗再关闭,再点击其他弹窗时,发现最大数量都会以第一次为准,不是以当前数据行的为准。
弹窗部分代码:
<el-dialog title="明细" :visible.sync="dialogVisible" width="1200px" append-to-body>
<el-table ref="tableRef" :data="tableData" fit highlight-current-row :header-cell-style="headerCellStyle" max-height="350">
<el-table-column
label="需求数量"
prop="quantity"
align="center"
min-width="130px"
:render-header="addRedStar"
show-overflow-tooltip
fixed="left"
>
<template #default="{ row }">
<el-input
v-model="row.quantity"
v-only-number="{ precision: 2, max: row.maxQuantity }"
type="number"
:disabled="!isEdit"
:class="{ 'negative-number-color': formInfo.orderMode === 'Z010' }"
/>
{{ row.maxQuantity }},{{ row.quantity }}
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button v-if="isEdit" type="primary" @click="saveList">确 定</el-button>
</span>
</el-dialog>
解决:
网上翻到了解决方案,需要在el-table中加一个唯一key来解决这个渲染问题,这个key是vue自带属性,主要用在 Vue 的虚拟 DOM比对算法中,在新旧nodes对比时辨识 VNodes。如果不更新这个key的话,显示隐藏列的时候,部分DOM不会重新渲染;因此我将每一行的行号作为key解决了这个问题!
<el-dialog title="明细" :visible.sync="dialogVisible" width="1200px" append-to-body>
<el-table ref="tableRef" :key="currentRow.rowNo" :data="tableData" fit highlight-current-row :header-cell-style="headerCellStyle" max-height="350">
...省略代码
</el-dialog>