• Vue3+Element-plus 报错记录
• 报错信息
  • 错误场景还原
  • 问题排查
    • 错误代码
• el-select多选

Vue3+Element-plus 报错记录

报错信息

1. TypeError: Cannot read properties of null (reading 'parentNode')
2. TypeError: Cannot read properties of null (reading 'exposed')

错误场景还原

后台管理页面，点击A页面以后再去点击其他页面就会出现这两个报错，如果直接点击其他页面一切正常，因此排查重点放在A页面上。

问题排查

相关文章链接：

1. https://juejin.cn/post/7089389807767552037
2. https://blog.csdn.net/qq_17686345/article/details/126358688

网友们总结下来大致由两类问题导致，一是路由根节点存在多个节点导致，二是函数或数据undefined 了。

同事的代码dom结构正常，此前检查代码发现过一个写死的分类ID，初步判断可能是因为ID写死，函数查询失败导致的undefined，所以先从这个不正常的函数进行排查。

错误代码

<template>
    <el-table-column label="资源类型">
      <!-- <template #default="scope">
        <div class="description">{{ filterId(scope.row.id) }}</div>
      </template> -->
    </el-table-column>
</template>
<script>
    watch(props, (_, newer) => {
        state.tableData = newer.tableData;
        state.categorys = newer.allCategory;
        state.styles = newer.allStyle;
        state.types = newer.allType;
        filterId(1523907745533792256)
    });
    
      const filterId = (id) => {
      let obj = state.types
      return obj.filter((word) => word.id == 1523916144031961088)[0].name;
    };
</script>

如上图代码，ID写死了，别问我他为什么这么写，我也不理解。总之把filterId()这段函数注释掉，改成正常的写法一切正常了。

el-select多选

<el-select v-model="selectDepartment" value-key="name" placeholder="请选择单位名" @change="selectDepartmentChange(selectDepartment)">
    <el-option v-for="department in departments" :key="department.id" :label="department.name" :value="department">
    </el-option>
</el-select>