el-table渲染踩坑

前言：

今天在弄一个弹窗表格功能时，发现只要点开某一行数据的弹窗再关闭，再点击其他弹窗时，发现最大数量都会以第一次为准，不是以当前数据行的为准。

弹窗部分代码：

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