vue elementplus 使用cellRenderer重写单元格,滑动滚动条渲染复选框出现错误

发布时间 2023-09-18 14:11:46作者: wwr01

使用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(), //阻止冒泡
  })
}