47-尚硅谷-硅谷通用权限项目-开发角色管理前端-角色列表（页面显示数据）

各位同学大家好，刚才呢，咱们在页面中完成了接口的调用，最终我们经过测试也看到了接口反的数据，一个是每页数据的列表，另外一个是总记录数，那咱们下面来做最后一步骤，做什么呢？就是把数据通过I的UI在页面中进行显示，那下面咱们开始进行显示。首先我们在里边把UI这个官网先打开。咱们打开一下。是由饿了么提供的这么一个组件，然后咱们找到里面这个组件的位置，就是在这里点查看详情，点击之后在里边呢，找到咱们显示用的组件，我们显示的用的组件，咱们找到这个组件叫table表格。然后大家看。在这里边呢，提供了很多样式的表格，那咱们以第一个为例，我们来看一下这个该怎么去用，这个代码不需要各位写，但是要求各位能看懂，因为IUI给咱们都听出来了。

那咱们看一下啊，我们就以这一段内容为例，我把这个内容给各位复制出来，咱们在里边看一下。首先我在桌面中呢，为了咱们看的方便，我建个T文件，然后咱们把它打开。打开之后把代码复制进来，咱们看一下这个内容到底是什么，首先我把内容给它先。划分成多个行，咱们方便我们查看。然后大家看啊，这个就是UI中的表格组件，叫e table，就是u table，然后大家看它是怎么用的。首先各位看最后这个部分，在扎尔里边是不是有个date，瑞里边是不是有段数据，它就是把这段数据用显示，这段数据呢，很明确是一段Jason的数组格式，那咱们看它是怎么做的，首先名字叫table data，各位看这个地方。

这个地方做什么呢？通过冒号date传入你数据，也就是我们的集合，它把集合会进行遍历，进行显示，下面加上样式，而这里边是显示的每行中的内容，大家看啊，有日期、姓名，然后各位看，这个地方叫prop prop什么意思呢？就是里边的这些名字，Date name address，所以说这个表格它就这么来使用，通过UY进行做到，咱们一会儿也是用它进行显示。这是咱们通过UI看到这个结构，那下面呢，咱们来整合下，我现在来到我的课件中，然后这里边有一段写好的yellow table组件，咱把它就直接复制过来，在我们这里边，咱们来测试一下它的效果，那现在我进行复制。

然后注意啊，各位复制的时候不要复制错，在这里边呢，有一个汤里div div，咱们放到div的里边去。然后在div里边，我们来详细看一下这段内容到底都是什么含义，咱们一个个来看。首先第一个大家看啊，我们数据集合是不是叫lists的，所以在里边呢，我就写上这个list的下面这些呢，是它的样式，这是那个条纹，这是边框，然后这是它显示的大小等等，在下面呢，有这个叫yellow table column，在prop里边就是显示我们那个内容，包括角色名称，角色编号，创建时间等等，这是我们看到的这么一个结构，另外这里边生成每条记录那个序号，就是1234序号，然后这个之后呢，在里边还一个地方，大家看这行，我特别说明一下啊，这行是什么意思？

咱们看这名字啊，Loading loading什么意思，是不是有加载的意思，所以咱们现在说明这个含义到底是什么，这里我举个例子说明，比如各位同学，我们在网上看视频的时候，经常遇到这么一个情况，大家可以想一下啊，比如现在网速很卡，一般会有一个提示。一般可能会转过圈，或者说有一个显示说正在缓冲，请稍后，这个我应该都见过，而现在V-loading就类似于这个效果，它会有一个转圈的效果进行加载，当你显示慢的时候，它会进行加载，那怎么做呢？里边有一个值，这个值是随便写的，当这值等于处，它就会显示转圈的效果，当它是false，那它就不会进行加载，所以里边是这么一个特点，那咱们啊把它来做个测试，咱们看一下什么意思啊，首先我在里边呢，加上一个叫。

List load这个我们写这个。它就表示是否显示你那个加载的图标。这是我们看到的，然后这个值呢，就是咱们在里边，比如说我们调用方法的时候，再让它就不需要进行加载，所以把这值咱就让它改成这个false就可以了，这里边我来一个this.list load等于这个。这是我们做一个编写，那咱们啊把这效果先试一下啊，看一下它是怎么样一个效果，咱们做个测试，首先页面都写好了，然后咱们来到这里边，现在我做一个刷新，大家看就这个效果是不是在转呢，它是一个loading这个图标，那我现在把这值啊，咱为了方便我就改成false了，就这个实际意义不是特别大，如果你网速慢能做到，如果网速快应该是看不到这个效果，咱就直接改成false了，为了咱们方便显示，然后下面呢，我们来看一下最终的数据能不能显示，咱们刷新，大家看我的页面中啊，角色列表中。

我们很清楚看到数据是不是进行显示，包括有序号名称，编码时间等，这个咱就完成了，所以以上是咱们做的，在页面中通过MUY里边的表格组件做的这么一个显示，这个我们就写到这里，但是显示之后呢，里边有一个小问题，各位仔细看啊，大家看这里。这个时间的值好像显示是不是不太对，不能说它不正确，它的问题是什么？他不是按照咱们当前时局显示的，因为各位都清楚啊，咱们中国处于东八区，但是它显示是按照标准时局显示的，所以这个咱需要改一下怎么改，咱通过接口改一下，在接口里边我们加上一段配置可以了，大家看这个配置。

加上你的日期时间格式，加上你的时区是东八区，那我现在把这个内容放到咱们接口的配置文件中去，我把这个打开，然后在里边放入我们的这段内容。咱们给他放下。这里边啊，我去掉。加上这个杰克son就是杰克的儿子啊，然后date format，加上日期时间格式，加上你的时区，然后把后端接口我们重新启动一下，最终我们再做个测试，等它启动。咱们看到接口已经启动了，然后来到页面中，在页面中我们再刷新。大家看时间是不是就正确了，所以以上我们就在前端页面完成了显示。