树形表格懒加载刷新

最新推荐文章于 2024-05-27 12:50:56 发布

青枙如初

最新推荐文章于 2024-05-27 12:50:56 发布

阅读量244

点赞数 3

文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_49425703/article/details/134406488

版权

/**
 * 项目中前后遇到，写法不一样,记录一下以供参考
 */
/**
 * 懒加载刷新 vue3 版本
 * row 操作行的父行信息
 */
const refleshTreeData = (row: any) => {
  // 若该row没有子节点 退出
  if (!tableRef.value.store.states.treeData.value[row.id]) {
    if (row.id && row.pId) enemyInformationGetById({ id: row.pId }).then((res) => {
      refleshTreeData(res)
    })
    return
  }
  console.log(tableRef.value.store)
  // 若当前节点只剩一个子节点了 
  if (tableRef.value.store.states.treeData.value[row.id].children.length == 1) {
    // 添加操作
    if (_dialogEditOptions.title == '添加子节点') {
      if (!row.pId) {
        tableRef.value.store.states.treeData.value[row.id].loaded = false
        tableRef.value.store.loadOrToggle(row)
        return
      }
      tableRef.value.store.states.treeData.value[row.pId].loaded = false
      tableRef.value.store.states.treeData.value[row.pId].expand = false
      if (row.id && row.pId) enemyInformationGetById({ id: row.pId }).then((res) => {
        tableRef.value.store.loadOrToggle(res)
        return
      })
    } else {
      // 删除操作
      // 置空
      tableRef.value.store.states.lazyTreeNodeMap.value[row.id] = []
      delete tableRef.value.store.states.lazyTreeNodeMap.value[row.id]
    }
  }
  tableRef.value.store.states.treeData.value[row.id].loaded = false
  tableRef.value.store.loadOrToggle(row)
}

/**
 * 懒加载刷新 vue2 版本
 * row 操作行信息
 * name 删除节点时 传递一个string参数 如delete
 */
refleshTreeData(row, name) {
  return new Promise((resolve, reject) => {
    // 获取父节点 重新懒加载
    getById(row.parentId).then((res) => {
      /**
       * 若执行删除该子节点
       * 且当前节点只剩一个子节点了
       */
      if (
        this.$refs.tableRef.store.states.treeData[res.id] &&
        this.$refs.tableRef.store.states.treeData[res.id].children
          .length === 1
      ) {
        if (name) {
          // 置空
          this.$set(
            this.$refs.tableRef.store.states.lazyTreeNodeMap,
            res.id,
            []
          )
          delete this.$refs.tableRef.store.states.lazyTreeNodeMap[res.id]
        }
      }
      // 懒加载刷新节点
      if (this.$refs.tableRef.store.states.treeData[res.id]) {
        this.$refs.tableRef.store.states.treeData[res.id].loaded = false
      }
      this.$refs.tableRef.store.loadOrToggle(res)
      this.$nextTick(() => {
        // 停止懒加载 loading 动画
        if (this.$refs.tableRef.store.states.treeData[res.id]) {
          this.$refs.tableRef.store.states.treeData[res.id].loaded = true
        }
        // 若父id存在 则同样懒加载刷新父节点
        if (res.parentId) {
          this.refleshTreeData(res).then((result) => {
            resolve(result)
          })
        } else if (name) {
          // 若 删除后 只剩根节点了
          // 则刷新数据 重新更新节点名称位置
          this.getData()
        }
        resolve('懒加载刷新完成')
      })
    })
  })
},