vue报错Uncaught TypeError: this.$el.querySelectorAll is not a function的错误原因

在使用 vue-admin-template 构建项目时，控制台一直报错如下代码：

[Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'map')"

found in

---> <ElTableFooter>
       <ElTable> at packages/table/src/table.vue
         <Index> at src/views/student/index.vue
           <AppMain> at src/layout/components/AppMain.vue
             <Layout> at src/layout/index.vue
               <App> at src/App.vue
                 <Root>

...(一共9条，这里省略)

Uncaught TypeError: this.$el.querySelectorAll is not a function
    at VueComponent.onScrollableChange (element-ui.common.js:11611:1)
    at eval (element-ui.common.js:11545:1)
    at Array.forEach (<anonymous>)
    at TableLayout.notifyObservers (element-ui.common.js:11539:1)
    at TableLayout.updateElsHeight (element-ui.common.js:11413:1)
    at VueComponent.doLayout (element-ui.common.js:13740:1)
    at VueComponent.resizeListener (element-ui.common.js:13735:1)
    at eval (resize-event.js:33:1)
    at Array.forEach (<anonymous>)
    at ResizeObserver.resizeHandler (resize-event.js:32:1)

没有具体报错的文件，不好排查。 

精简代码到最小，逐一排查后发现绑定数据 data 后报错，所以判断可能与数据 list 有关，

<el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

查看 data 定义，发现 list 初始化定义为 null

// table.vue

  data() {
    return {
      list: null,
      listLoading: true
    }
  },

而 Element-Ui 文档中 el-table 要求data的数据类型为 Array

修改list的数据类型为 array后，问题完美解决！// table.vue

// table.vue

  data() {
    return {
      list: [], //修改数据类型为数组
      listLoading: true
    }
  },