虚拟表种设置了checkbox,但是删除时,发现删除后,下一个checkbox自动被选中,且删除时,报错找不到id
没有设置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就是编码问题了