这里可以接着之前的一篇文章：特殊table的二次开发
目前已经基本上修复这些bug了，有些bug是因为不细心，有些bug是因为不熟悉用法，踩坑。还有些是因为关闭弹窗没有reset表单还有表格数据。下面就会一一复现这些问题。
我遇到的问题主要在于：
-
【Q】点开弹窗后，点击关闭，或者多个窗口来回点开，就会报莫名其妙的错
-
【A】主要是由于一些关键的响应式数据没有关闭就恢复初始值导致的，比如 el-table的tableData，vxe-table 没有执行 $table.remove()，表单数据没有reset，还有一些响应式数组没有置空等原因，大家可以自行检查，如果是弹窗刷新第一打开没问题，关闭再打开会报错，一般都是这些问题。
-
【Q】el-table vxe-table内表格的内容插槽为表单元素时，v-model的问题，之前我的做法是用一个对象数组去根据table，row的index去动态绑定
<template #default="{ row }">
<vxe-input @change="calcRow(row)" type="number"
v-model="products[$table.getVTRowIndex(row)].salePrice"></vxe-input>
</template>
//getVTRowIndex(row) 这个方法返回这一行数据row在vxe-table tableData中的实际索引位置
比如vxe-table, 在内容插槽中这种方式去绑定 v-model="products[$table.getVTRowIndex(row)].salePrice" 这种方式也不是说不可以，就是有点麻烦并且没有活用这个表格的响应式特性，之前一直都这么用，就是走了一些弯路。然后这种也很容易出现一些bug。
- 【A】正确的方式就是，直接拿到插槽的row，然后直接v-model="row.salePrice" 即可。因为vxe-table,其他的比如el-table 的table数据其实就是响应式的数据。 #default="{ row }" 这里拿到的也是响应式数据，可以直接绑定。也不容易出错！！！
<vxe-column width="220px" field="suggestedPrice" title="建议售价(元)" :edit-render="{ enabled: false }">
<template #default="{ row }">
<span v-if="row.suggestedPrice">{{
row.suggestedPrice
}}</span>
<span v-else="">-</span>
</template>
</vxe-column>
最后修改了之后，直接通过 这个table组件的获取数据的方法或者$ref.data 拿到数据即可
这个图展示了el-table是一样的操作！！！
开发这么久，碰到动态可编辑表格，都是傻乎乎的用前面那种方式，挺傻的~~~
- 【Q】弹窗里，vxe-table :data="tableData", 新增一条记录的坑
一定要在 nextTick(() => {}) 去执行新增操作，不然就会否则会出现表格没有渲染完成就插入数据，导致表格没有渲染出来，并且会有离谱的bug。
根据官方文档的demo，新增一条记录：$table.insertAt(record, -1) ，-1表示追加到最后。
但是之前我尝试使用tableData.value.push({}) 这种方式去新增一条记录，会出现一次性创建了两条记录，并且修改一条，另一条也会变化，出现这个问题，那么只有可能push的这两条记录，指向的是同一个地址，在网上也找到了同样的问题：
- 【A】我是使用的$table.insertAt(record, -1) 这种方式，然后使用 下面的方式获取到数据的
const { tableData } = $table.getTableData()，这个是获取表格的所有的数组，包括已经有的和刚插入的新数据。
// const {insertRecords} = $table.getRecordset()//这里可以获取到插入的数据，注意仅仅是插入的，比如你页面加载已经有的数据，使用这个获取到的是空数组
-
【Q】 还是由于时机的原因，你点开一个弹窗，有可能逻辑先走了，但是试图还没加载完，导致报错
-
【A】 对于一些数据的初始化，或者赋值，都建议在nextTick中完成，避免莫名的bug。
PS:下一篇分享vxe-table的一些使用方法，这个表格功能真的很强大。后续使用，碰到有复用价值的功能或者bug问题都会继续记录~~~
