人力资源项目-角色模块

最新推荐文章于 2022-07-04 10:53:16 发布

学前端的皮卡丘

最新推荐文章于 2022-07-04 10:53:16 发布

阅读量164

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_41943654/article/details/118419084

版权

本文探讨了在Vue.js角色模块开发中遇到的数据不显示问题，主要涉及两个错误。一是未在created钩子中调用加载数据的函数，导致页面渲染时数据未加载。二是关于ElementUI表格组件的使用，包括错误地将pageSize设置在filterParams内以及对作用域插槽的误用。正确的解决方案是确保在适当生命周期钩子中调用数据加载函数，并正确设置表格属性和使用作用域插槽。

摘要由CSDN通过智能技术生成

角色模块开发遇到的问题

获取角色列表，调用接口渲染数据，数据不显示？

解决方式：
1. 没有在created中调用函数，在页面渲染时没有触发函数 created (){this.loadRoleList()},
2 . 没有绑定表格数据
表格列的索引 type=‘index’ 是ElementUI提供的规则

报错1

在这里插入图片描述
错误原因：因为定义pagesize的时候外层包裹了filterParams，所以应该是:page-size=“filterParams.pagesize”

报错2

在这里插入图片描述
错误原因：作用域插槽template标签包裹了 ,作用域插槽的v-slot="scope"中的scope是指列表数据的每一项，如果包裹这个标签，数据为父级的list，而list初始化为[],所以不应该包裹
正确形式：

 <el-table-column label="操作">
                <!-- 标签之前的内容就是插槽的内容 -->
                <template v-slot="scope">
                  <el-button size="small" type="success">分配权限</el-button>
                  <el-button size="small" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
                  <!--row从 el-table-column 里-->
                  <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>