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

标签：vue checked 单元格 value 复选框 const onChange row

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

 

标签：vue,checked,单元格,value,复选框,const,onChange,row
From： https://www.cnblogs.com/wwr01/p/17711729.html