1.需求：实现公司设置页面的功能

根据以上的结构，我们采用element-ui的组件实现

Tabs组件，Table组件，Button组件，分页组件

alert组件, Form组件

2.角色管理页面功能实现

2.1读取角色列表数据---调整表格对其方式&分页处理

2.1.1封装接口--将其统一放到setting中实现

2.1.2在页面中调用接口获取数据，绑定表格数据 src/views/setting/index.vue

调用接口拿到相关数据：

2.1.3调整组件table的样式---序号&&数据居中显示

2.1.4实现分页相关的功能-----实现数据的更新

监听分页的页码实现：

2.1.5分页功能的其他扩展实现

2.2新增角色功能

2.2.2页面基本结构---表单&表单验证

2.3实现编辑功能

2.4删除角色功能

2.4.1接口封装

2.4.2删除功能的实现

2.4.1table组件中怎么取到对应的行：

插槽的使用：juejin.cn/post/696691… 使用： ----------->弹出框 MessageBox 弹框 this.confirm

注意⚠️

3.编辑页面的实现

需求：点击编辑按钮， 实现编辑角色的功能

3.1控制标题的改变----计算属性实现---多种方法

3.2实现表单数据的绑定----ref拿到组件的表单数据---无需通过ref进行传值

3.3实现编辑功能的实现

因为是与新增功能共用一个组件，所以当点击确定时，要区分是新增还是编辑

3.4编辑功能易错

1.接口的写法------>易错 2.为什么再次刷新后数据才会更新------->延迟错误 自定义事件绑定用@

3.传入的是该行row-------重要

4.公司信息部分

需求：读取公司角色信息，展示在页面上 请求中的companyId来自哪里？它来自我们登录成功之后的用户资料，所以我们需要在该组件中使用vuex数据