权限配置导致的表格数据无法展示且报错为Cannot read properties of undefined (reading ‘edit‘)

1.背景

        为了给所有按钮增加权限使用v-hasPermi进行配置，在配置完成后送测试测试，结果发现表格虽然接收到后端数据但是并不展示，打开日志发现报错，后端接口正常

2.排查

        报错是 Cannot read properties of undefined (reading 'edit')，所以一开始查询所有包含edit的界面并且逐一排查，但发现edit并不承接数据，只是一个字符串用来标识操作的，所以一开始没往权限上想

点进报错里看也什么都看不懂

所以开始看后端接口数据，但是两个数据格式参数一样，说明不是后端问题，那就只可能是前端。

        前端先将地址换为线上地址，突然错误的指向就明确了，指向了权限，也就是这行代码

<el-button v-hasPermi="[item.permission.edit]"  @click="editOn(scope.row)" type="text" size="mini" icon="el-icon-edit">编辑</el-button>

由于我是v-for循环展示表头的，而且是通用表格组件，为了不报错，只能每个有操作编辑的表格都需要进行配置，否则就会因为权限问题报错。

3.解决方法

        1.给每个使用的表格按钮都加权限

        2.加if判断，有permission参数的进行权限配置，没有的另起v-else