日常bug解决记录之Element ui 解决主表勾选数据子表对应插入数据

实现形式：

 

需求：

1、主表勾选数据后，子表对应生成被勾选的数据。

2、取消主表勾选，子表对应数据删除。

3、子表对应行的数据点击取消后，主表对应数据的勾选也要取消。

实现过程中遇到的bug：

1、主表翻页再退回后，上一页的勾选消失。

2、主表第一页勾选数据后，再翻页到第二页勾选数据，子表数据对应生成了，再将主表切回第一页，然后再次点击主表第二页，此时点击取消子表数据，bug出现：会对应增加一条我取消的子表数据，没有删除。

需求实现方式：

1、主表勾选数据后，子表对应生成被勾选的数据。

2、取消主表勾选，子表对应数据删除。

主表绑定handleSelectionChange事件,当勾选数据时，会默认将当前行数据传递，将当前行数据赋值给子表，即可实现主表勾选，子表对应生成勾选数据，同时取消勾选也会改变checkedTableData数组，随即删除子表数据。

   // 选择用品弹窗，表格勾选事件
    handleSelectionChange(val) {
      this.checkedTableData = val;
    },

3、子表对应行的数据点击取消后，主表对应数据的勾选也要取消。

 子表点击事件，传递点击行的index和行内数据，点击方法：

// 选择用品子表 移除方法
      removeRow(index,row) {
       this.checkedTableData.splice(index,1) 
       // 主表取消勾选 
       this.$refs.multipleTable.toggleRowSelection(row)    
},

点击事件内，删除子表数据：

子表点击取消(删除)当前行数据时，splice子表数组的checkedTableData的当前坐标数据。

点击事件内，删除对应主表数据：

根据Element官方提供的方法，首先在主表上绑定ref="multipleTable"

 然后在子表点击删除当前行方法内：

// 选择用品子表 移除方法
      removeRow(index,row) {
       this.checkedTableData.splice(index,1) 
       // 主表取消勾选 
       this.$refs.multipleTable.toggleRowSelection(row)    
},

使用：this.$refs.multipleTable.toggleRowSelection(row)

官方给出的使用方式，略作改造：

 以上方式即初步实现了，主表勾选，子表对应生成，取消勾选，子表数据对应删除。子表删除数据，主表勾选对应消失。

但是上面提到的2个bug随即出现：

1、主表翻页再退回后，上一页的勾选消失。

解决如下：

getRowKey(row) {
   return row.id;   
},

给主表绑定行数据的key，官方解释：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。bug1解决。

2、主表第一页勾选数据后，再翻页到第二页勾选数据，子表数据对应生成了，再将主表切回第一页，然后再次点击主表第二页，此时点击取消子表数据，bug出现：会对应增加一条我取消的子表数据，没有删除。

解决如下：

 子表点击删除的时候，主表对应勾选的数据也要取消，所以上面提到过，调用this.$refs.multipleTable.toggleRowSelection(row)方法，但是忘记加false状态值，因为每次主表返回上一页的再切换回来的时候，点击子表数据删除的时候，没办法判断你是勾选还是取消，会再调用一遍：

   // 选择用品弹窗，表格勾选事件
    handleSelectionChange(val) {
      this.checkedTableData = val;
    },

导致明明是删除子表数据返回会对应增加一条，加了false告知事件此时是删除状态，而非选中即可。

官方给出的回答是这样的：

 收官。