element-plus el-table 懒加载，节点添加、删除

组件封装

// el-table 挂载ref, load是懒加载请求的函数, 把这个el-table 封装成一个组件方便复用
<el-table
  border
  height="100%"
  row-key="id"
  ref="tableRef"
  :lazy="!!props.load"
  :load="props.load"
  :data="props.data"
  @row-click="(row) => onClick('row-click', row)"
/>


const tableRef = ref(null)

// 获取el-table内部的store和懒加载映射节点
const store = computed(() => tableRef.value.store)
const lazyTreeNodeMap = computed(() => store.value.states.lazyTreeNodeMap.value)

// 更新table数据
const lazyUpdate = (pid, item) => {
  const data = lazyTreeNodeMap.value
  data[pid] = item
}

// 暴露方法，用于父组件ref调用
defineExpose({
  lazyUpdate,
})

调用

<admin-table
    ref="tableRef"
    class="h-750px"
    :load="tableLoad"
    :data="table.data"
    :header="table.header"
    :operate="table.operate"
    @click="onTableClick"
/>

const tableRef = ref(null)

// 初始化数据
const initData = async () => {
  try {
    const res = await getData({ pidIsNull: true })
    table.data = res.list
    table.total = res.total
  } catch (e) {
    table.data = []
    table.total = 0
  }
}

// 初始化表格数据
onMounted(() => {
  initData()
})

// 表格懒加载
const tableLoad = (row, treeNode, resolve) => {
  getDept({ pid: row.id }).then((res) => {
    resolve(res.list)
  })
}

// 更新表格
const tableUpdate = async (pid) => {
  if (pid) {
    const data = await getData({ pid })
    tableRef.value.lazyUpdate(pid, data.list)
  } else {
    initData()
  }
}

// 删除
const del = async (row) => {
  await ElMessageBox.confirm('确认删除?', `删除 - ${row.name}`, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  const res = await delData([row.id])
  await tableUpdate(row.pid)
  success(res.msg)
}