elementUI Vue3 el-table 懒加载多选操作

不说废话直接上代码

<el-table
        :key="itemKey"
        border
        :data="demo2.tableData"
        ref="tableRef"
        highlight-current-row
        size="small"
        row-key="ID"
        width="100%"
        height="100%"
        lazy
        :load="load"
        @select-all="selectAllFun"
        @select="selectFun"
        @selection-change="handleSelectionChange"
        default-expand-all
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :tree-props="{ children: 'Children', hasChildren: 'Haschilds' }"
      >
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
        />
        <el-table-column prop="OrgName" label="组织结构名称" tree-node />
 </el-table>

const checkIsAllSelect = () => {
  const oneProductIsSelect = [];
  demo2.tableData.forEach(item => {
    oneProductIsSelect.push(item.isSelect);
  });
  //判断一级产品是否是全选.如果一级产品全为true，则设置为取消全选，否则全选
  let isAllSelect = oneProductIsSelect.every(selectStatusItem => {
    return true == selectStatusItem;
  });
  return isAllSelect;
};

//全选操作
const selectAllFun = selection => {
  let isAllSelect = checkIsAllSelect();

  demo2.tableData.forEach(item => {
    item.isSelect = isAllSelect;
    tableRef.value.toggleRowSelection(item, !isAllSelect);
    selectFun(selection, item);
  });
};

//部分选择操作
const selectFun = (selection, row) => {
  setRowSelect(row, null);
};

//懒加载与选择方法
const setRowSelect = (row, parentrow) => {
  
  if (row.isSelect === "" || row.isSelect == null) {
    row.isSelect = false;
    tableRef.value.toggleRowSelection(row, true);
  }
  
  //parentrow不为null操作懒加载后的勾选
  if (parentrow != null) {
    row.isSelect = parentrow.isSelect;
    tableRef.value.toggleRowSelection(row, parentrow.isSelect);
  } else {
    row.isSelect = !row.isSelect;
    tableRef.value.toggleRowSelection(row, row.isSelect);
    onNode(row);
  }
};

//实现所有节点勾选方法
const onNode = row => {
  //row.Haschilds判断是否最后一级，为true时不是最后一级
  if (row.Haschilds) {
    var NodeList = tableRef.value.store.states.lazyTreeNodeMap.value[row.ID];
    if (NodeList && NodeList != undefined) {
      NodeList.forEach(item => {
        item.isSelect = row.isSelect;
        tableRef.value.toggleRowSelection(item, item.isSelect);
        onNode(item);
      });
    }
  }
};

//懒加载方法
const load = (row, treeNode, resolve) => {
  setTimeout(() => {
    var parms = { parentid: row.ID };
    GetOrganize(parms)
      .then(childs => {
        console.log(childs);
        childs.forEach(item => {
          setRowSelect(item, row);
        });
        resolve(childs);
      })
      .catch(msg => {
        errorMessage(msg);
      });
  }, 500);
};

暂时实现懒加载向下选择勾选，后续更新：判断全部子节点勾选后父节点也勾选！