Vuetify Treeview点击末级节点加载Datatable的更新与报错问题求解

1. 报错问题修复 #

你遇到的slice属性访问报错，是因为Vuetify的v-data-table要求绑定的items属性必须为数组，当点击无关联数据的节点时，后端返回了null，你直接将containerContent赋值为null就会触发该异常。
修复方式：在接口赋值逻辑中增加数组兜底处理，同时每次触发节点点击时先清空旧数据，避免残留：

clickOnNode(activeIds) {
  // 每次触发先清空旧数据
  this.containerContent = []
  // 无激活节点直接返回
  if (!activeIds.length) return
  const nodeId = activeIds[0]
  axios.get('/get-container-content/' + nodeId)
    .then(response => {
      // 兜底保证永远赋值为数组
      this.containerContent = response.data || []
    })
    .catch(err => {
      this.containerContent = []
      console.warn(err)
    })
}

2. 事件用法说明 #

@update:active的使用方式是正确的，不需要将请求逻辑放到selected方法中。
之前点击已打开过的节点失效，是因为你的selected计算属性逻辑未完成，节点激活状态判断异常，修复该计算属性即可：

selected () {
  if (!this.active.length) return undefined
  const id = this.active[0]
  // 递归查找多级节点中匹配id的当前节点
  const findNode = (nodes) => {
    for (let node of nodes) {
      if (node.id === id) return node
      if (node.children?.length) {
        const child = findNode(node.children)
        if (child) return child
      }
    }
    return undefined
  }
  return findNode(this.allTopContainers)
}

3. 非末级节点清空数据逻辑实现 #

如果需要仅末级节点拉取数据、其他节点直接清空展示，可以在clickOnNode中增加节点类型判断：

clickOnNode(activeIds) {
  this.containerContent = []
  if (!activeIds.length) return
  const currentNode = this.selected
  // 非末级节点直接返回，不发起请求
  if (currentNode.children?.length) return
  // 末级节点发起请求
  const nodeId = activeIds[0]
  axios.get('/get-container-content/' + nodeId)
    .then(response => {
      this.containerContent = response.data || []
    })
    .catch(err => {
      this.containerContent = []
      console.warn(err)
    })
}

额外优化 #

你代码中computed定义的items属性没有被任何地方使用，可以直接删除，减少不必要的计算开销。

内容的提问来源于stack exchange，提问作者Luka