6.用户管理页面（一）

一、背景设计

首先给所有的界面一个白色背景。可以在main.vue中用div将router-view包裹住。

 

二、User页面整体布局

 

三、搜索栏制作

使用el-form、el-form-item、el-input、el-option、el-date-picker以及layout中的el-row、el-col实现基本布局。

难点：

每次页面刷新都会跳转到not-found页面。

 

 会发现el-select和el-date-picker没有占据完全。

 

 这样就解决啦！

四、代码抽取封装

将代码抽取到base-ui中（其中封装的组件既可以在本项目使用，也可以在其它项目使用）。

 

 然后在user组件中使用即可，但是现在页面是写死的。我们其实应该通过配置文件来决定显示什么内容。

在我们抽出的form组件中应该由外界传入props：

 

 这里的IFormItem：

 

 下面就可以从user.vue中传入配置了。又因为这里需要用到IFormItem这个类型，所以可以把上面定义的导出：

 

 首先进行类型修改：

 

 然后在user.vue中进行配置并传入form组件。form组件进行遍历展示。

v-bind=""

 

 

 

 

 后续把配置文件从user.vue中抽出来。

另外规则校验：（但其实不应该是这里做校验，应该在后面新建的时候做校验。后面记得改！）

其他一些动态绑定的属性：

 

 

现在先来实现一个响应式的布局，当页面缩小时，每行展示的数量变化。

 

 现在就不用:span了，直接动态绑定colLayout就可以了。因为有很多值需要绑定，所以直接用v-bind。

 

 现在来对所有的配置进行抽取。

 

 

 

 

 

 

 五、目前存在的问题

问题：页面不能刷新

怎么查找这个问题呢？在router--main里面有导航守卫相关的代码，每次刷新都会执行这里的代码。通过

 

 观察打印台的信息，

 

 匹配到的那么居然是‘not-found’

当点击刷新时，页面会重新加载，也就是说会重新加载main.ts，代码从上到下依次执行，当执行到app.use(router)时会注册路由，就会去执行router里面的install函数，而install函数中会获取当前的path，拿到路径后会去当前router.routes里面匹配路径，但当前其实是匹配不到的，也就是匹配not-found。在setupStore（）中回去注册动态路由，但是之前已经匹配好了。然后去执行路由守卫（回调）通过router.getRoute()看起来是拿到所有路径，但是匹配的不对。

所以只需将setupStore（）放在app.use(router）前即可，也就是说先把路径注册好，再匹配。

 

问题：刷新时如何让左侧菜单栏定位正确

 

 

 

 

 

问题：当路径只有/main时会报错，而且页面什么也不显示

当路径为/main时我们应该把它重定向到系统总览--核心技术

 

 把遍历到的第一个菜单保存并导出，并在导航守卫中使用

 

 

至此菜单和路径的映射关系就没问题了！

 

六、搜索栏双向绑定

首先定义了formData，并将其绑定到form中，但是怎么和search.config.js匹配呢？这是就需要增加一个field

 

 双向绑定，默认传进去的就是modelValue

 

 

 

 

 

 

实现双向绑定，感觉这里还挺麻烦的。按照上面的方式确实可以实现，但是违背了单向数据流的原则。

首先在user.vue中通过ref定义formdata。并通过父传子传递给form组件，这里直接通过v-model动态绑定。

 

 

 

 那么传递给form组件中的名称就是modelValue，发送事件的名称就是update:modelValue.

 

 另外：

 

 在上面使用时：

 

 

七、form中的插槽

 

 这样就可以选择是否需要插入了。

 

 然后就是再次抽取封装--page-search。