elementPlus + table 树形懒加载,子节点的刷新

文章目录

需求描述

一个树形表格的增删查改

技术细节

刚开始想的很好,新增/编辑/删除时不调用接口,而是直接更改数据,如删除时,直接删除对应下标的数据
遇到的问题

  1. 实际业务中是否有子级,是不确定的-这个好解决,判断一下就行
  2. 通过load接口获取到的子项,使用proxy.$refs.table.store.states.lazyTreeNodeMap.value获取不到节点
  3. 通过proxy.$refs.table.store.states.treeData.value可以获取到节点数据,但是不能触发更新
  4. 最后使用了最简单的方式,新增,删除,编辑完成后,直接使用proxy.$refs.table.store.loadOrToggle(row)重新触发load调接口
javascript 复制代码
<template>
  <div>

    <el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="table">
      <el-table-column prop="date" label="Date" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="address" label="Address" />
      <el-table-column prop="address" label="Address" width="270">
        <template #default="scope">
           <el-button type="primary" size="small" @click="handleAdd(scope.row)">
            add
          </el-button>
           <el-button type="primary" size="small" @click="handleAdd2(scope.row)">
            add2
          </el-button>
          <el-button size="small" @click="handleEdit(scope.row)">
            Edit
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import {onMounted,ref,getCurrentInstance} from 'vue';
const {proxy} = getCurrentInstance();

const handleEdit = ((row) => {
  console.log(row)
})
const handleDelete = ((row) => {
  console.log(row)
})
const handleAdd = ((row) => {
console.log(proxy.$refs.table.store.states.treeData.value)
console.log(proxy.$refs.table.store.states.lazyTreeNodeMap.value)
 // proxy.$refs.table.store.states.treeData.value[row.id].loaded = false;
  proxy.$refs.table.store.states.treeData.value[row.id].loaded = false
  proxy.$refs.table.store.loadOrToggle(row)
})
const handleAdd2 = ((row) => {
  
})
const load = (
  row,
  treeNode,
  resolve
) => {
  console.log(row)
  setTimeout(() => {
    resolve([
      {
        id: `${row.id}_31`,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
        hasChildren: true,
      },
      {
        id: `${row.id}_32`,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
        hasChildren: true,
      },
    ])
  }, 1000)
}


const tableData1 = [
  {
    id: 11,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
    hasChildren: true,
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    hasChildren: true,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    hasChildren: true,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    hasChildren: true,
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

小结

关键点在于:proxy.$refs.table.store.loadOrToggle(row)

相关推荐
【ql君】qlexcel7 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
MiyueFE8 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子12 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~40 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了42 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_44 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构