8.用户管理页面（三）

一、商品信息页面制作

1.1 page-content基本布局

第一步就出错：

 

 此时我们发现把内容全部展示出来太丑了，其实table中有一个属性可以解决这个问题：

 

1.2 page-content其他插槽如image

商品界面中的图片展示可以用element-plus中的el-image。

 

 但是在page-content中放的应该是一些公共的插槽，不能所有的插槽都里面放吧。所以放在goods页面中是最好的。也就是跨组件插槽传递。（难点）

 

 

 

 

1.3 page-search

搜索怎么都不起作用，原因如下：

 

二、菜单管理页面制作

 还是要用到el-table组件。

 

 最开始没有数据是因为在store中有些操作没做。

参见element-plus：

 

 又因为并不是所有的页面都需要这个展开的，所以可以在配置中写这两个属性。既然这些属性是在在table中选择性展示的，那么table中就要利用props接收。

 

 

 

 另外这里其实不需要分页器的。

 

 

三、按钮权限

从菜单中把所有的权限放在一个数组中，然后在hooks中封装一个usePermission(pageName, 'create')返回一个Boolean值。

 

 现在已经把菜单中所有的按钮权限保存在数组中了，但是要选一个地方调用这个方法：

 

 在hooks中封装usePermission

 

 拿到Boolean值

 

 

 

 三、删除功能

 

 

 

 

 

 

四、新建、编辑功能

el-dialog对话框+form

 

 同样也需要进行抽取封装。

 

 现在要实现的是当我们点击‘编辑’和‘新建’按钮时，应该弹出弹框。

 

 思考：新建和编辑按钮都在page-content中，而dialogVisble则在page-modal中，这可怎么办？可以在page-content中emit事件到父组件中，再通过父组件对子组件操作。

 

 

 

 想要在父组件中修改某个子组件的属性值，那么首先需要通过ref拿到这个子组件。

 

 现在又有一个问题，点击新建时应该是展示密码这个选项的，但是点击编辑时应该是没有密码选项的。（难点）

 

 

 

再把user中的东西封装到hooks中usepagemodal.ts

难点在于怎么让编辑和新建时对isHedden进行操作呢？

 

 

 

 

 

 总结：如果是页面自己的逻辑要写在自己的页面中，不要写在公共逻辑中。

另外这里不能写死：（难点）

 

 首先需要把数据请求下来并保存在vuex中。

 

 

 

 

 数据已经获取到了，现在需要保存到options中。

 

 但是现在很奇怪：

 

 但是如果我先在用户管理页面刷新一下，那么上面就有数据了。这是因为数据请求是异步的，所以我们执行上面代码时，数据还没有请求下来。是不是很奇怪，我这数据明明是从store中拿的啊！确实，如果我们在template中通过￥store获取数据，是可以拿到的，通过computed也是可以的。但是这里当数据改变时，是不会重新执行的。

 

 当数据发生改变时，这个computed副作用函数会重新执行。当下面的改变时，页面就会重新刷新，获取最新数据。

五、新建、编辑功能之确定按钮