关于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>