7.用户管理页面（二）

页面内容展示

一、请求到的数据放置位置

1.直接放在user.vue中

 

 2.放在vuex中

 

 

 

 

 ......

二、数据表格化展示

获取到userList和userCount的数据后，怎么展示呢？当然是使用element-plus啦。

 

 这种要怎么写呢？当然是再添加一个配置文件咯！

 

 

 

 需要和接口名称一致。

然后封装自己的table。

到目前为止，所有的数据都是以文本的形式展示，如果我想以按钮的形式展示怎么办？其实el-table-column里面是有插槽的。

 

 

 

 难点！如何让每一列的某些字段做特定修改

 

 

 

 

对时间的格式化！这个功能在很多页面都会用到，所以想设置一个全局属性。

main.ts

 

 

 

 在实际开发中肯定不能把所有代码都写到mian.ts中。

 

 在main.ts中只需

 

 又因为对时间做格式化是一个非常常见的功能，所以具体实现当然是放在utils里面啦。

npm install dayjs

时间格式化功能完成后，继续对表格进行优化。

比如要不要有序号列：

显示与否应该是由外界决定的:

 

 

 

 再比如前面要不要有选择的小框框。

现在如果选中每一个，怎么拿到那一行对应的数据呢？

 

 

 

 但我们的数据获取到后并不是就在这处理了，而是要去外面处理，所以要通过emit发射出去。

 这部分功能完成以后，还需要做一个就是对数据进行操作的按钮。

 

 

三、添加表单名称、新增操作以及分页功能

 

 这里涉及到插槽、具名插槽、默认插槽等知识点。

 

 这里有一个问题就是我们显示的都是英文的，需要进行国际化。

 

四、封装

 搜索框和表格之间的联系后面再做，现在先把表格那的内容全部抽取到page-content，首先把配置抽到contenttableconfig.ts中。

然后有一个问题，我们数据请求的代码写在哪呢？还写在user.vue中吗。如果还写在user.vue中一方面会有大量的代码，而其他页面比如role.vue其实要实现的功能也差不多，那怎么办？

可以每个页面有一个pageName属性，然后真正的网络请求直接交给pagecontent去做。

 

现在又有一个问题，在page-content中

 

 

 这样我们不论那个页面进行数据请求，拿到的都是user的数据，这肯定不行啊。可以通过getters对state中的数据进行一个处理。

直接通过state是拿不到数据的，因为它有一个确定的类型，所以这里先转成any类型。

 

 

 

 

五、数据搜索、重置

在pagesearch中我们是对搜索框中的数据进行了双向绑定的，所以是可以拿到输入数据的。（难点）

双向绑定的属性应该是由配置文件的field来决定。

 

 

 现在formdata就是动态来决定啦！

 

然后就是重置按钮

 

 但是很奇怪，formdata中的数据确实为空了，但是搜索框中还是有显示。问题就出在下面：

 

 

 怎么解决呢？

 

 

 另外一种好理解一点的方法见另一版。

 

数据搜索功能：

现在的问题是：pagesearch怎么从pagecontent中拿到搜索数据

 

 当在pagesearch中点击了搜索按钮后，先传到user组件，再由user组件去调用gepagedata

 

 

 

 那么怎么在父组件user中调用子组件page-content中的方法呢？当然是要拿到这个组件咯！

 

 上面这点代码在很多地方都会用到，所以这里可以再做一个抽取。抽取到hooks中。

六、数据尾部优化