elementUI Vue3 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);
};

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

你可能感兴趣的:(elementui,vue.js,javascript)