el-table 树形数据,子行数据可以异步加载

1、

javascript 复制代码
<el-table
	border
    :header-cell-style="tableStyle?.headerCellStyle"
    ref="tableRef"
    :data="tableData"
    row-key="id"
    
	:default-expand-all="false" // 默认不展开所有树形节点

    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
	/*
		配置树形结构的属性,
		children:指定子节点数据的字段名,
		hasChildren:指定一个布尔值字段,表示是否有子节点
		这样组件就知道如何递归渲染树形结构。*/

    lazy // 启用懒加载模式(子节点数据不会一次性加载,而是当用户展开某个节点时,通过load方法动态加载)
    
	:load="load"
	/*
		指定懒加载时调用的方法,这里绑定的是load方法。
		当用户展开一个节点时,会触发这个方法,传入当前行的数据和resolve回调函数,用于异步加载子节点数据。
	*/
></el-table>



import { treeByParentId } from '/@/api/admin/dept';

const tableData = ref([])
let nowRowId = ref('')

const getTableList = (parentId) => {
  return new Promise(resolve => {
    treeByParentId({parentId}).then(res => {
      if(res.code == 0 && Array.isArray(res.data)){
        resolve(res.data)
      } else {
        resolve([])
        useMessage().error(res.msg || '数据已加载完毕')
      }
    }).catch(() => {
       resolve([])
    })
  })
}

const load = async (row, treeNode, resolve) => {
  if (!row.hasChildren) {
    return resolve([])
  } else {
    nowRowId.value = row.id
    const data = await getTableList(row.id)
    row.children = data
    resolve(data)
  }
}

const getData = async (parentId = nowRowId.value) => {
  // 查询的时候,如果deptName的值不为空,parentId置为空
  if(state.queryForm.deptName != ''){
    parentId = ''
  }
  const { data } = await treeByParentId({ parentId, deptName: state.queryForm.deptName })
  tableData.value = data
}

onMounted(() => {
  getData()
})

// 重置
const reset = () => {
  nowRowId.value = ''
  state.queryForm.deptName = ''
  getData()
}

2、

接口的数据结构:

javascript 复制代码
{
  "code": 0,
  "data": [
    {
      "id": "唯一标识",
      "name": "节点名称",
      "hasChildren": true,  // 必须字段!
      "children": []        // 必须字段(即使为空数组)
    },
    // ...其他节点
  ]
}
相关推荐
灵感__idea6 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8504 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的6 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀6 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce7 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L8 小时前
Vue 电影导航组件
前端·javascript·vue.js
xptwop9 小时前
05-ES6
前端·javascript·es6
Heo9 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端