vue elementplus 使用cellRenderer重写单元格,滑动滚动条渲染复选框出现错误
使用elementplus的虚拟表格,动态加载表头的时候,第一列为复选框;但是在滚动滑动条的时候出现了一个奇怪的现象;
我选择了4和5,当我滑动滚动条的时候如下:
像是复选框跟着在动;
通过跟踪代码,查出问题;
在cellRenderer中打印checked的值发现问题,大滚动的时候,打印出来的都是undefined,渲染就会出现上面的问题;
解决办法如下:
columns.value.unshift({ key: 'index', title: '#', dataKey: 'index', width: 80, cellRenderer: ({ rowIndex }) => `${rowIndex + 1}`, }) columns.value.unshift({ key: 'selection', dataKey: 'selection', width: 50, cellRenderer: ({ rowData }) => { //必须添加这一句不然出现渲染错误,页面展示的就是复选框选中跟着滚动条一起动 if (rowData.checked == undefined) rowData.checked = false const onChange = (value) => { rowData.checked = value } return h(SelectionCell, { value: rowData.checked, onChange }) }, headerCellRenderer: () => { const _data = tableData.value const onChange = (value) => { tableData.value = _data.map((row) => { row.checked = value return row }) } const allSelected = _data.every((row) => row.checked) const containsChecked = _data.some((row) => row.checked) return h(SelectionCell, { value: allSelected, intermediate: containsChecked && !allSelected, onChange, }) }, })
// 定义选择列单元格组件
function SelectionCell({ value, indeterminate = false, onChange }) {
return h(ElCheckbox, {
onChange: onChange,
'onUpdate:modelValue': (newValue) => {
onChange(newValue)
},
modelValue: value,
indeterminate: indeterminate,
preventDefault: true,
onClick: (e) => e.stopPropagation(), //阻止冒泡
})
}