50-尚硅谷-尚医通-后台系统-医院设置前端-列表（3）

各位大家好，咱们继续来开发医院设置这表功能，刚才呢，我们把扎此部分完成了接口调用，最终也得到了我们需要的数据，那咱下面呢，把数据在页面中就来完成一个显示，也就是说在我们代码中的这位置，咱们做这个页面显示，那怎么显示给各位来说一下。因为咱们现在用这个前端框架，它主要基于两个技术做到的，一个是vuee，一个叫IPA的UIIPAUI呢，因为我们前端页面显示，所以咱们下面就到MUI中找一个组件用于我们的显示，那我们来找一下。现在我把这mui的官网已经打开了，然后打开之后我们往下看。因为咱要做这个列表功能，那咱用表格应该更加方便，所以我找到里边的这位有一个叫table表格，大家看在表格里边呢，是不是有不同效果，大家用它能做过显示，那表格怎么用，因为我这个框架中呢，已经把MUI都引入过了，咱们之前说过在这个问点宅子里边，大家看一下，就是我们的这个位置。

然后里边是不是引入了ii，所以在里边我们能直接使用，那我们找一下这个表格代码怎么写，看这位置显示代码。然后大家看里边的结构呢，应该就是这个结构，那这个结构给各位先复制出来，然后咱们看一下它示例代码是怎么写的，根据它我们改成我们的效果。然后各位看啊，在它这里边呢，首先是定了一段初始值这个table data，然后上面做了一个显示，那怎么显示的呢？我把结构给大家先区分一下，然后我们来详细看一下。各位看啊，这个结构它用了一个标签yellow table，就是I u table，然后里边有一个冒号date，是不是咱说那个单向绑定，然后里边传入角table data，大家看啊，这table data是不是就是它呀，是不是就是我们的数据啊，而咱们刚才的数据应该就是这个list吧，它是不是要进行遍历，所以在里边就是这个table list或者table data，然后下面有它的值，值里边有日期、姓名、地址，而这里边怎么做，咱主要看一个属性叫prop。

是practice，就是属性，然后你看里边啊，有这个date name address date name的dress是什么呢？大家看是不是它里面的三个名字，Date name的dress，而最终是不是做了一个显示，所以咱们是不是也可以这么做，就是咱们把这个list进行遍历，然后里边的属性名字在上面写下就不可以了，这是关于I u table的使用。然后咱们用它快速改一下这一代码，不需要各位敲一点，因为在这个就是文档中给咱们都提供出来了，咱用它改就可以了，那我现在我就把我课件中写好这个代码，咱就直接复制到里面去就可以了，然后咱们来根据我们的实际给它快速改一下，我就把这个e table部分直接咱就顺到里边来。

然后把它的结构咱们稍微。调整一下，就是这么一个。基本的结构。然后结构调整之后，我们来看一下这里边内容到底都是什么，咱们看啊，首先也奏推广，咱是不是要便利我们的粒子集合，这list就是咱们定义的是不是list，包括里边有数据，然后这个做到之后，下面呢，有很多的yellow table column是咱们的具体内容，包括内容中首先第一个大家看啊，第一个呢，其实是一个序号，那我给它起个名字，这个label。我们叫这个句号。然后他用了一个type叫indext，也就是第一行12341类推，下面有医院名称，编号路径等等内容，然后这些呢，就是pro里边加上那个名字，这名字就是咱们接口中反应那个名字，也就是说我们那个实体类中对应的使用名称，就是这些名称，咱们把它直接写过来就可以了，就是里面这些值。

然后这些值之后大家看啊，在下面的有这么一个地方，也是我们的这个位置。各位看这位置什么意思啊，你看。是不是叫状态，因为这个状态大家看到咱们表里边存的状态是不是有这个一或者零啊，而一和零是不是代表不同的状态，比如一是可以用，零是不能用，那咱们不能显示一和零，是不是要显示它的文字，所以这里边我们就做了一个判断，判断中怎么做，大家看啊，这里边我们用了一个叫slope scope什么意思？它就表示我们整个这个表格，然后里边有一个scope，点肉，表示表格中的每一行，比如你看到这里边，比如这里边有四行，然后点肉就是每一行，它把每一行中这个CS得到，然后做判断，判断呢用了一个三目运算符或者三元表达式。

如果是一可用，不是一就不可用，然后里边用了这种方式做这个判断，就是通过死扣点肉得到里边的值，这各位可要知道。然后在写的过程中，再来看一个小细节。里边是不是三个等号，三个等号什么意思？注意啊，并不是写错，它表示值和类型都相同，比如我这值是整形，然后它这个。值是一，那它都相同，那这三个等号表示完全相同，值和零都一样，所以这样的话，我们最终用这段代码就可以完成咱们历史那个数组里边值的一个显示，就是把它在里边就可以显示出来。

那咱们用它就改出来了，然后改完之后咱们到页面中看一下这个效果什么样的，我们来看一下啊，比如咱们到里边我一刷新大家看。这值是不是有了，有这个序号123，名称，编号，路径，人，电话，还有状态，状态目前一是不是都是可用状态。所以这就是关于咱们完成的一个课医院设置列表功能的这么一个显示。就是里边的这个做法，各位把它能快速完成出来，咱们测试也都成功了啊，包括课件中写的跨域，刚才咱们也都解决了。就完成了啊，然后完成之后呢，在里边呢，咱们肯定要进一步完善，那完善什么呢？因为咱们这个列表功能就不带分页，并且上面是不是要带那个条件查询，所以咱们下面呢，就把这个分页给他就加上。那分页怎么加，给各位说一下啊，大家看啊，首先你看在我这里边呢，就是我现在调的是这个方法。

但是这个方法大家看目前它里边每次是不是传个当前液影，但是这个值目前固定值是不是一啊，比如说我们目前这么查的话，是不是只能查你第一页的数据，而不能查多页的数据，比如我第二页第三页肯能查不了，所以咱们怎么做？第一个把方案先改一下，比如说里边我传个参数配置，让它默认值等于一，然后下面我做个赋值，就是这次点current等于配置。什么意思呢？比如我现在当我传的第二页，那我就查第二页，当我传三就查第三页，比如这个看的值跟你传的值做个设置，这样的话我们就可以实现一个多页的查询，如果你不写它，那只能查第一页，然后这个写完之后，咱们在里边呢，可以加上一个分页的这么一个插件，也是MUI中有这个分页的插件，就是里边都存在，那这插件呢，我在课件中已经写好了，咱们把它直接复制过来，然后咱们给它快速改一下就可以了，因为这是一个UI中给咱提供好的。

咱直接拿出来用就可以了，然后这个插件呢，我就放到E的table下边。把这个给各位来说一下，咱看怎么做啊，首先第一个这里边呢，有很多的冒号加属性，是不是咱们说的带线绑定，然后里边需要传几个值，第一个值看配置。是什么？是不是就当前页，就是传咱们当前页的值，我们这是current，把这翻进来，然后第二个是page size，就是你每页的记度数，咱们是limit，第三个total是一到总记度数，刚才我是不是也做了负值哦，所以这些都传进来。然后穿完之后，下面两部分是它的样式和它的布局，然后最后要看配置，看change什么意思。比如现在我查第一页，我点第二页，点第三页，每次发生页数的变化，这个事件就会触发。

这是由U给它分成好的，然后在里边加上咱们那个方法，就这个方法get头list子就可以了，每次做页面的这种页码的转换，它就会调这个get例子方法就可以了。而这过程中，比如我们查第一页里边会传一，你查第二页会传二，但是这个当前页不需要我们传框架中给咱封装好了。比如你查第一页一直就是一，你查第二页就是二。这样的话，咱现在把这个分页条就加上了，就是里边的这么一个结构。我们就写出来了，然后写完之后，下面的咱们把分页效果我们来看一下，看他怎么做，就是刚才代码过程第一个我们加了一个当前页的参数。我写个公式啊，添加当前页的参数，就是根据它做一个分页的查询，然后第二个咱们复制了一个分页插件，里边改成咱们的变量名字，包括我们的方法，最终就会实现。

然后洗完之后咱们到页面中，我们来试一下啊，比如我刷新。大家看当前是第一页，然后你看啊，一共有四条记录，然后当前是第一页，比如现在我点二是不是还第二页，我在第二页的时候是不能点，因为第二页的时候没有下页，它一共就是两页，然后再点这个，比如我点这个下一页是不是都可以，所以这样的话，咱们就把分页条加到了咱们这里边，这过程各位能给他做到就关于分页查询。然后分页查询做到之后，最后还有一个是不是那个条件查询啊，也就是说我们在页面的上边是不是加一个那个表单的条件输入框就可以了。而表单输入框在这个中也有对应的这个东西，比如说我们找一下输入框就跟这个类似，比如说你这个什么医院的名称，医院编号点查询就可以了，在里边你看怎么做，咱就来一个。

Yellow yellow item里边加个VGA model。这各位应该记得啊，是不是咱说那个双向绑定，然后就可以了，最终事件中要方法，那咱们把这写一下。我从课件中把这段复制下，就是UI中改出来的，然后用它改动的效果。因为这个条件查询呢，是在页面的上边，给咱放到最上边。然后在最上面咱们给它改一下，大家看啊，首先yellow一个叫in line等于true。这什么意思？各位注意啊，因为咱们这个是不是要在一行显示，所以你这么写就是一行，如果你不写它，那就是多行，现在在一行，然后下面有很多的e form item，就咱说那个表单项。带表单项中我们有两个，一个是医院名称，一个是院编号，然后最后有我们最终那个查询按钮，包括什么重置按钮里面都有。

就是这么一个结构，然后在里边大家看啊，首先在这过程中就咱就来一个查询了，在这过程中呢，我们在按钮上绑定事件，事件中呢就调咱们这个get list方法做一个调用。然后在里边呢，因为咱们每次做条件查询要传条件值，所以咱们写了一个V-model，就是咱说的双向绑定，在双向绑定中设置OBG，之前我们都定过了，然后向里面就设置两值，一个host name，一个host code，把这个设进去。而这写法给各位强调啊，如果说啊，我们在Java代码中，那在里边咱把它的属性是不是要做个定义啊，就来一个空等等，但是现在JS里边这个不需要定义，你可以来一个空的对象，然后当你写上测试点OBG，它会把值给你就塞进去，这是JS一个特点。

所以现在我们把这个条件部分就加上了，里面就加了一个。表单数框用V-model做双向绑定，当你向里面数值之后，因V-model里边有值，那下面测舌威力对象中是不是又值，最终传到接口中做一个条件查询。所以这样的话，条件我们也加上了，然后加上之后最终我们来测试一下啊，看一下最终的结果。比如说我现在输入一个医院的名称，我们找一个，我就输入这个。斜和月，把这个拿过来。然后输入之后我点查询，大家看是不是查出来了。比如说我现在我再来一个医院的编号，我们找一个就是这个编号。1001的这个编号。然后咱们点查询是不是查出来了，比如说我现在什么都不输入，点查询是不是查全部。

这就是关于条件查询、待分页医院设置必保功能，咱们现在把它就全部完成了。而通过这个功能大家应该能感受到我们这个前后端分离开发过程，咱们是先写后端接口，让他反这些数据，然后在前端中按照流程我们页面中调用接口得到数据，最终在页面中显示。调用过程中用到vuee，包括axls，然后在页面显示用到这个I的UI，最终完成这个功能，所以现在医院设置列表咱们就最终写完了。