el-table导致TypeError: this.$el.querySelectorAll is not a function

在使用Vue的过程中报以下错误,特此记录

报错截图

vue.runtime.esm.js?2b0e:1888 TypeError: data.reduce is not a function

at Proxy.render (table.js?ad41:2558)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
at Watcher.get (vue.runtime.esm.js?2b0e:4479)
at Watcher.run (vue.runtime.esm.js?2b0e:4554)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
at Array.eval (vue.runtime.esm.js?2b0e:1980)
at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

TypeError: this.$el.querySelectorAll is not a function

at VueComponent.onColumnsChange (table.js?ad41:2475)
at VueComponent.updated (table.js?ad41:2467)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at callHook (vue.runtime.esm.js?2b0e:4219)
at callUpdatedHooks (vue.runtime.esm.js?2b0e:4351)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4336)
at Array.eval (vue.runtime.esm.js?2b0e:1980)
at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

报错位置

判断绑定:data后报错,所以可能和rightList有关

// Rights.vue
<!-- 表格区域 -->
  <el-table :data="rightList" stripe>
  </el-table>

发现在定义rightList时初始化为一个空对象

// Rights.vue
<script>
export default {
  data() {
    return {
      // 权限列表数据,就是这里导致了报错
      rightList: {},
    }
  },
}
</script>

解决

element-ui中el-table中要求data类型为数组类型

所以修改为数组即可,修改后代码如下

// Rights.vue
<script>
export default {
  data() {
    return {
      // 权限列表数据,就是这里导致了报错,改为[]类型就不会报错了
      rightList: [],
    }
  },
}
</script>