关于vue.js:eltable导致TypeError-thiselquerySelectorAll-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>