Vue.js 中使用 el-tree 组件时，deptList 赋值报错：Cannot read properties of undefined (reading 'split')

在 Vue.js 中使用 el-tree 组件时，您可能遇到以下错误：Cannot read properties of undefined (reading 'split')。这个错误通常出现在您尝试使用 deptList.value = data.rows.split(',') 给 deptList 赋值时。

这个错误表明 data.rows 是 undefined，而不是一个字符串，因此无法使用 split 方法进行拆分。

问题分析

• data.rows 是 undefined： 可能是因为查询的数据不包含 rows 属性，或者在后端代码中有错误，导致返回的数据没有 rows 属性。

解决方案

1. 检查 data.rows 的值： 在调用 getRoleForm 之前，使用 console.log(data) 打印 data 对象的值，检查 data.rows 是否存在以及它是否是一个字符串。

2. 调整后端代码： 如果 data.rows 确实是 undefined，您需要确定为什么返回的数据中没有该属性。可能是因为查询的数据不包含 rows 属性，或者在后端代码中有错误。您需要修改后端代码，确保返回的数据包含 rows 属性并且它是一个字符串。

3. 使用其他方法赋值： 如果无法修改后端代码，您可以尝试使用其他方法给 deptList 赋值，例如使用 Object.assign 或 spread syntax 将 data 中的属性复制到 deptList 中。

示例代码

getRoleForm({ id: roleId }).then(({ data }) => {
  console.log(data); // 检查 data 的值
  if (data.rows) {
    deptList.value = data.rows.split(','); // 如果 data.rows 存在，则进行赋值
  } else {
    // 处理 data.rows 不存在的情况
  }
  Object.assign(formData, data);
});

总结

通过检查 data.rows 的值，并根据情况调整后端代码或使用其他方法赋值，您就可以解决 Cannot read properties of undefined (reading 'split') 错误，并成功地将数据赋给 deptList。