elementUI-plus虚拟表el-table-v2 checkbox删除后，下一个复选框又被选中且无法删除

虚拟表种设置了checkbox，但是删除时，发现删除后，下一个checkbox自动被选中，且删除时，报错找不到id

1. 没有设置row-key

每行的 key 值，如果不提供，将使用索引 index 代替

2.row-key值设置成什么值？

如果数据没有经过特殊处理，直接使用数据种的id即可。如此处我的数据是resourceData，直接设置为resourceData.id即可

    <el-auto-resizer>
      <!--行高 :row-height="36" -->
      <template #default="{ height,width}">
        <el-table-v2
          :columns="columns"
          :data="resourceData"
          :width="width"
          :height="height"
          :row-height="36"
          :row-key="resourceData.id"
          fixed
        />
      </template>
    </el-auto-resizer>

3.对数据column列名进行过特殊处理时

如果对数据做了特殊处理，如下，我对数据进行处理前即表头的列名，由中文转为英文

// 将英文列名改为中文列名（id不显示）
const transferColumnName = (columnIndex) =>{
  // id,programId，fileType，reason，lastProductionVersion，productionVersion，submitter，server
  // recordTime，setted，settedTime，finishTime，uatTime，deployABy，testABy，deployBBy,operations
  let cnColumnNameArr = ['WFD名称','文件类型','提交原因','上个版本号','生产版本号','提交人','地址'
  ,'提交时间','状态','SIT部署时间','SIT测试完成时间','UAT部署时间','SIT已部署','SIT已测试','SIT部署完成','操作'];
  return cnColumnNameArr[columnIndex];
}

// 生成列名
const generateColumns = (columnsArr) =>
  columnsArr.map((item, columnIndex) => {
    item = transferColumnName(columnIndex);
    return {
      key: `${item}`,
      dataKey: `${item}`,
      title: `${item}`,
      // 通过函数设置width值
      width: calculateWidth(columnIndex),
    };
  })

这样处理后，vue proxy数据都会具有响应性，所以找不到id了

解决：只要在设置复选框时，再设置一个id给行数据即可

绑定数据的id为，然后row-key才能使用id 。rowData.id = rowData[0];

const customizeColumns = (columnsVal) =>{
  // 全选按钮：在数组头部添加
  columnsVal.unshift({
      key: 'selection',
      dataKey: 'selection',
      title: 'selection',
      width: 30,
      cellRenderer: ({ rowData }) => {
        // 绑定数据的id，然后row-key才能使用id
         rowData.id = rowData[0];
        const onChange = (value) => {
          rowData.checked = value
          if(rowData.checked){
            selectedId.value.push(rowData[0]);
          }else{
            let idIndex =selectedId.value.findIndex(item=>item===rowData[0]);
            selectedId.value.splice(idIndex,1);
          }
          return rowData.checked;
        }
        return <SelectionCell value={rowData.checked} onChange={onChange} />
      },

      headerCellRenderer: () => {
        const _data = unref(resourceData)
        const onChange = (value) =>
          (resourceData.value = _data.map((row) => {
            row.checked = value;
            // 全选id设置
            if(row.checked){
              selectedId.value.push(row[0]);
            }else{
              selectedId.value = [];
            }
            return row;
          }))
          // 全选
        const allSelected = _data.every((row) => row.checked)
        // 非全选
        const containsChecked = _data.some((row) => row.checked)
        return (
          <SelectionCell
            value={allSelected}
            intermediate={containsChecked && !allSelected}
            onChange={onChange}
          />
        )
      },
    })

4.总结

和vue 的 :key一个原理，必须设置循环数据的唯一值，才能在操作时定位到唯一数据。其他bug就是编码问题了