day09/上午/172-尚硅谷-尚融宝-嵌套表格数据展示的方案分析

数据字典展示这一块呢，我们是需要在这个位置直接展示我们的Excel数据当中的啊，那个列表啊，并且呢，是从数据库中取出来的哈，好，那我们呢，就嗯两件事情，第一件事情呢，还是后端接口的开发，第二件事情呢，还是前端代码的整合，那首先呢，我们先来看一下我们。后端接口的开发。后端接口的开发呢，啊，我们是需要展示这样的一个页面。我们先来看一下数据字典的设计，这块有一个需求，你看我们需我们需要展示这样一个页面，这个页面呢，它是在带这个折叠的是不是啊啊，那也就是说我们在想办法呢，让前端的啊，这个数据呢，能够通过折叠展开的方式去显示，所以有的时候呢，必须得前后端配合才能真正的实现这样的一个功能，你不能说反正我把数据全给你了，然后你愿意咋展示咋展示，那前端其实某种意义上也能去做啊，但是呢，如果想用这个效率更高，前后端都非常方便的方式的话呢，或者说前后端呃，这个集成起来都非常方便的方式的话呢，还是需要后端有一些配合的，所以呢，有的时候啊，我们说这个接口文档的定义到底是由谁来定义呢？其实是前端定义更合理啊，因为其实我们后台取数据只是知道把这些数据要取出来，并不知道前端具体要怎么展示，对不对，你前端展示方案的。

不同，和我们后端取数据啊的这个结构可能就就有关系了啊，你我前端要扁平展示，那我后端直接扔给你一个扁平数据就行了，二维的数据行列数据就行了，你前端要嵌套展示，那我后端呢，既可以扔给你一个扁平数据，也可以扔给你一个嵌套数据，那么区别呢就在于如果后端也扔给一个扁平数据，前端处理起来就比较麻烦，后端扔一个嵌套数据，前前端处理起来就比较容易。还有一种情况呢，就是前端它是有固定的组件的，比如说现在我们这个前端用的就是element UI里面的table，那table里面它是有这种展开折叠的这样的一个扩展功能的，它的这个扩展功能呢，对后端的这个数据的封装呢，是有特殊要求的，也就是说他要求你后端的数据一定要封装成什么样子给我传过来，那我前端才能展示成这样，所以这种情况下呢，我们的后端就必须尊重前端的这样的一个数据封装要求，所以在很多比较这个大型的这个。

互联网公司当中哈，这个接口文档啊，其实最开始都是前端定义的，因为咱们后端并不知道他们前端要什么样的，这个具体的数据的格式对不对啊，但是有一些中小型的公司这件这个接口文档的定义呢，确实是由后端定义的，所以有一些同学，他作为一个新手程序员，他去公司，然后老板还让他定一些接口，这个其实是最困难的啊，也就是说未来你们去公司之后干啥？最困难就是让你从无到有先把接口定义出来，其实这个是最困难的，因为开发的过程其实很简单，如果有人把接口给你定义出来了，你无非就是看一下输入的参数是什么，输出是什么，然后依依据这个目标我们那获取输入，然后这个从输入当中啊，这个能够得到输出就可以了，中间进行一系列的数据获取，数据处理，对不对啊，最关键的就是啊，这个你要知道接口是怎么定义的好，所以呢，接口的定义还是挺重要的哈，那。

这里面呢，我们如何定义这个接口就是一个问题了，所以呢，我们根据刚才咱们说的，必须要看一看前端的人家的这个组件是怎么定义的，有什么特殊要求，所以接下来第一件事情呢，我们要打开element UI去看一看table里面相关的组件啊。谁硬谁说了算。其实有的时候我们去那个。

我们去那个公司当中去工作的时候哈，有的时候前端推给后端，后端推给前端，因为接口这个东西谁都不愿意写，都嫌太麻烦。好，然后这边呢，是。当然大型的互联网公司啊，就是啊，就不会这样，分工是特别明确的，就是一些中小型的公司不会出现这种现象。啊，然后这面呢，我们搜一下还是IUI。好，然后接下来呢，我们来点一下。然后在这面呢，我们去选中这个组件，在组件里面呢，我们找到。Table组件，CTRLF吧，直接这样搜table，这样容易一些，然后点table。

好，进入到这个贴这个组件当中呢，我们从上往下捋啊，这种你就没有什么技巧了，只能就一个一个看，看到了你需要的这个内容，你再点进去啊，详细的研究，所以从上往下一个一个捋，看哪个是我们需要的那种折叠表格。看一看是按这呢，这有个展开行是吧，当内容过多并且不想展示的时候，但是这个好像是和我们刚才要的这个也稍微有点差别，我们这个并不是展开行，我们这个好像展开之后它还是还是表格内容对吧，然后你看它这个展开之后呢，它就它就不是表格内容了，它就是呃，另外的一个像表单内容似的哈，就是具体的在展示这个表单，我们再看看还有没有什么类似的，诶这个行叫数形数据与延迟加载，你看这个跟刚才咱们那个一模一样，几乎是吧啊。

看一下这面那衫一模一样的，那现在呢，我们就来看一看人家这个是怎么实现的，这个是什么。好怎么实现的呢？我们直接打开它这个显示代码。打开这个显示代码之后呢，我们来看啊，先看一看它上面这个说明，这说明你还是有必要看一看的啊，在这个地方我们来看一下，叫做当支持啊，支持数类型的数据显示，也就是说他说呢，我这个你可以显示成这种啊层次结构啊好，然后接下来呢，当肉中包含children字段时。Children准字段六中包含children准字段时被视为树形数据，哎，那我们看一下它所封装的这个数据吧。它封装的数据是这样的，有个table data，然后table data里面呢，有一个其实就是一个数据列表了啊，整个是数据列表，然后数据列表里面呢，这里面呢，有。

所有的数据对象。这是第一个。这是第二个，好，这是第三个。每一个数据对象呢，我们都管它叫一个肉肉row，就是一行啊，也就是说它这面说的这个内容，当肉中，好，当这个行当中如果包含children字段的时候，我们来找一下，刚才呢，我们这里面有若干行，这是第一行记录，这是第二行记录，这是第三行记录，第三三行记录里面正好包含一个children准字段，对不对？好，那么这个children准字段你看又是一个数据列表，这个数据列表里面呢，又有若干行，这是第一行，这是第二行，所以这块呢，就是嵌套数据了啊好，那这个嵌套数据呢，它在这个地方怎么描述的呢？它叫它数形数据，其实就是嵌套数据的意思，那么在这个地方又说了，渲染树形数据的时候呢，必须要指定肉key，什么意思？

肉key在这个地方指定了一下肉key，也就是说如果你这个数据列表当中的这个table data里面的这个数据呢，是一个数形数据，并且呢，你想在这个呃table包里面给它展示出来呢，我们呢就必须指定这个肉key叫做呃行的主键是吧，那你这个行的主件是什么呢？我们这边是ID啊，那所以呢，我们就也给它指定为ID啊，这个是它这个组件需要的一个属性，好然后接下来呢，支持子节点数据异步加载，什么叫支持子节点数据的步加载呢？啊意思就是在这个地方。默认情况下。上面这块啊，默认情况下，可能我们加载的只是这一行，这一行这一行，它这里面的children并没有去数据库中取出来啊，什么时候你展开的时候，他再次向服务器端发起一个请求，然后呢，去数据库中呢，把这个数据记录呢给它取出来，所以这个呢，就是异步加载啊的一个。

概念啊好，那么一会我们看一看，我们怎么样去加载它哈。然后接下来呢，我们再来看刚才这个说明。好，呃，支持异步加载啊，然后呢，读到这儿了，刚才设置table的lazy属性为true。与加载函数漏，哎，什么意思？这句话是接着上句话说的。就是说它是支持异步加载的，你怎么样去让它能够具有异步加载的特性呢？就是table里面的lazy属性。背包里面有一个lazy属性，它这里没写啊，因为那很显然它这个不是异步加载是吧，因为你看它是把这个所有的数据都事先定义好了。对吧，它这个数据拿过来就是完整的啊啊，我们说异步加载是什么？拿过来数据的时候是没有这里面的数据的啊，然后点击展开的时候线去后台去获取这个初准，这个叫异步加载，所以他这面应编码已经把所有的数据都拿到了，那就不存在异步加载了，但是如果有异步加载的话，那我们就要在table当中设置一个lazy属性，也就是说在这个位置我们要再添加一个属性叫lazy啊，然后等于true，然后呢还得添加一个漏的函数。

啊，漏函数这个东西呢，我们一会儿再说，总之呢，是配合这个异步加载，你你你你异步加载，你不得有这个方法调用嘛，然后他才能去后台去调用这个新的子数据，对吧？啊children准数据，那么用什么方法调用，用这个load啊，再添加一个load的函数，所以一会咱们再具体的去写啊，然后通过指定肉中的has children字段，肉是什么肉，实际上就是刚才我们看到的这每一行，每一个每一行记录。啊，它呢，希望你这个每一行记录里面呢，有一个叫做has children的一个字段，它这个它这个里面没有哈，啊，它这里面没有，因为它这个不是异步加载啊，再强调一遍，异步加载需要需要什么呢？需要这个has children字段来指定哪些行是包含子节点的，Children与has children都可以通过trip pros配置好这块有一个trip pros可以配置children与has children，这个一会咱们再具体的解释，大家先有一个印象啊，就是现在呢，他说了这么多事儿啊，那么第一次看这个东西的同学呢，大家可能就会有点晕哈。

这个没关系啊，就是慢慢就好了，因为你最开始接触这个东西的时候，每个字你都认识是不是，但是合起来读啥意思就理解不了了，这个都是正常的现象，所以呢，我们能做到的，目前为止，你第一次接触，你就先硬着头皮，从头到尾你把它读出来，能理解几个理解几个，明不明白，这是一个必要的过程啊。好，现在我们已经把它读出来了，读出来之后呢，我们就来看一看。

嗯，现在我们应该怎么去着手做这件事情，那么大家注意啊，在刚才这个里面有一个就是比较模糊的一个概念呢，叫has children has children啊，他说肉中如果有has children了，它可能是包含子节点的，那么我们呢，就把这个has children的。在这个搜一下，看看有没有has children这个数据存在啊，你看这块。这块就王小虎是吧，ID等于三王小虎，他说他has children是这意思吧。看一下啊。是哈。好像就那一个有啊，然后它等于true是吧？啊然后呢，你会发现在这个地方。

啊，这面啊。合并行或列。要问哈，哎，哪去了，刚才那个。串找一找啊。搜一下上哪去啊，这呢，不是不是这哪上。啊这呢好一不小心给它串没了哈，然后大家看这面呢，其实就是这个第二个表格ID等于三王小虎，我们把它点开，其实你会发现呢，这块就有一个有点类似于延迟加载的一个效果，因为刚才我第一次点开的时候，它是不是有个漏的呀，还有个漏的，然后这个我点开的时候就没有漏的，看见了吧，我再给大家演示一遍啊。啊，搜一下这款啊，树形数据与延迟加载，它这面很显然是不是两个表格啊。

对吧，那两个表格里面这个20160501王小虎对吧，一二第三个记录啊，王小虎，然后第三个记录下面是不是有这个进一步的嵌套数据啊，它直接就是以数形结构的形式给你展开显示到这个位置了，这是第一个啊，第一个呢，我们说它没有用到延迟加载，是一次性加载的。所谓的一次性加载呢，就是一次性的把所有的数据都定义出来啊，所以呢，我们来看一下这第一个表格，第一个表格里面的数据是怎么定义的啊，那这个呢，是我们的第一个表格啊table。到这为止是第一个表格，第一个表格呢叫table data，好，然后接下来呢，在下面这个地方，你会看到table data里面的数据是事先已经都获取出来了，所以这个呢就叫非延迟加载啊，这是第一个表格。

然后呢，这个表格里面呢，就没有刚才提到的哪个属性呢，就是这个属性叫has children看见了吧？啊也就是说当我们这个表格是非延迟加载一次性的是吧，这种加载的情况的时候呢，你就不用考虑他刚才说的那个has求这的情况啊，这是第一个，然后接下来呢，我们再来看第二个表格。第二个表格呢，在这叫做table data1 table data1呢，我们复制一下放这儿，然后你会发现呢，这块是第二个表格的定义，第二表格的ID为三的这个王小虎呢，他就有has children。他有has children呢，它的值是什么是处，然后你看这面就是我们的这个最终执行的这个代码哈。那个王小虎。嗯，这呢啊，最终执行的代码，大家注意看我点击这个。

展开符号的时候，这块有一个细节哈。看是不是有个loading的一个状态呀，好，它实际上呢，就是延迟加载了，你会发现这个王小虎里面，刚才我们看的并没有数据，对不对，但是你一点它，它却能展示数据，那这是什么，就是延迟加载啊，就是延迟加载前提是什么呢？前提是我们要给这个王小虎定义一个has children，这样的话呢，我们的前端的代码。在渲染这个数据的时候，才能知道给他渲染出一个什么呀，给它渲染出一个展开按钮，否则的话，你看没有子数据的，它其实就没有展按钮啊，像上面这种非延迟加载有子数据的，它就有展开按钮，但是呢，你如果延迟加载的话，你没有子数据显示出来，目前你还想让它展展示这个展开按钮，那你这个地方就要大，有一个has children的一处，明白吧，所以这个呢，是我们has children的一个一个定义啊，那在我们的这个数这个第二个table里面，你会发现它呢还定义了一个lazy。

对吧，还定义了一个lazy，好，还定义了一个什么呀，Load，所以呢，刚才我们在上面的这个文档当中看到的一些比较陌生的词，其实逐渐的就全都出现了，比如说刚才说的lazy，比如说说的load函数，对吧，比如说has children对吧，你一定要先读啊，读完了之后先有个印象，有个印象之后你你再回头来看这个代码，然后你反反复复的对照几遍，测试几遍，你会发现两面就对应上了啊，就知道这个谁和谁进行匹配了，好然后呢，接下来呢，Lazy意思就是延迟加载，然后数据里面定义的那个has children啊，其实就是延迟加载需要的一个属性，然后肉key呢，就是定义这个子节点需要匹配的，然后接下来我们看漏的，漏的是什么。

是这个方法，这个很显然它呃是模拟了一个远程调用，因为set time out呢，在javascript当中呢，它是延迟一秒来执行，所以呢，他并没有真正的去后台取数据啊，他只是模拟了一个后台的一个异步处理，因为需要有一个时间延迟，如果你上后台取数据的话，所以他这样去做，做完了之后呢，你看他就拿到了王小虎下面的两条子集录，对不对，作为这个漏的方法啊，好，然后呢，这个漏的方法呢，它有一个三个参数，这三个参数呢，其中最后一个参数叫reserve reserve是什么意思？是这个漏方法人家自己注入的一个参数，你只要把你从后台拿到的数据放到reserve，这个是一个函数类型的参数啊，放在resolve这个函数的参数当中，那么它就会自动，也就是说咱们这个前端的组件会自动的把这两条记录给。

给你插入到这个位置。看看预览哈。会自动的把这两条记录呢，给你展示到这个位置，所以这个就是resolve啊，当然了，Reserve内部是怎么实现的，你不用去关心，你只需要知道怎么去调用这个就行了啊，只要你调用好那个reserve，你后面拿到的数据就会直接被渲染到附记录当中啊，这是它的O方法，然后呢，这样的话呢，我们来看。呃，漏后面还有个trip pro啊，Trip pros是什么呢？就是通常情况下呢，我们在后台返回数据的时候啊。定义的那个数据属性啊，可能和前台它需要的这个数据属性不不太一样，比如说后台我们在定义啊这个实体类的时候啊，我们在这个实体类当中呢，没有这个children属性啊，没有这个has children准属性。

但是我们起个名字起的是别的，比如说后台实体类，我们写的是child的啊，然后呢，后台实体，后台的那个数数据库啊，比如说数据库里面啊，不是那个实体类啊，后端Java端实体我们的属性属性属性定义。叫child，然后呢，这个也是需要后面需要的定义的哈，叫has child，然后呢，前端。前端呢？它渲染数据需要什么呢？它需要的是children和什么呢？和has children。好，他需要你给他的这个数据里面。

稍等啊，它总是跳来跳去。这面啊，他需要你给他的这个数据里面呢，是有类似于children这样的节点的，或者呢，是有啊has children这样的节点的，那这个节点是哪来的，是不是后端封装过来的后端接口返回的哈，我后端呢，因为数据库方面定义的原因，或者说我后端和前端之前呢，没有这个充分的沟通，我后端就返回了这个这个属性和这个属性，但是我前端要的是这个属性和这个属性怎么办？你这个时候呢，就要配这样的一个这个。代码了，就是在我们的代码当中啊，在H天猫当中，我们定一个tree pro，然后这个地方呢，是我前端需要的。啊，这个地方呢，就是我后端实际返回的，这样的话，它能给你自动的做对照，就对一应，否则的话，前端需要的和你返回的数据字段不一致，那没有办法编程的是不是这怕这程序没有办法执行啊，所以呢，如果我们当前的应用程序是这种情况的话，那么这个属性呢，我们就要这样定义。

明白吧，啊，所以呢，呃，我们要这样定义，这样的话呢，我们的前端的渲染引擎就会直接自动的把child对应到children这个节点上，自动的把has child对应到has children这个节点上，当然一般情况下，如果我们前期前后端做了充分的沟通的话，就不会出现这种问题了啊，因为这种问题完全是前后端没有进行充分沟通，后端自己定义自己的，前端自己定义自己的，但是后期呢，也是有整合的办法的，就是这样，但如果前后端充分沟通了，那这块你就不用写了，因为后端也叫这个啊，然后前端也叫这个对吧，这面也是后端也叫这个，前端也叫这个，这样的话呢，就可以完成这个非常方便的开发了，所以这个前期的沟通是非常重要的，所以这块呢，我们就把整个的这个啊。

数形数据与懒加载这块呢，结合着文档简单看了一下啊，但是光看文档肯定是不够的，大家可能有一部分同学已经看文档都看晕了，所以呢，我们还是需要结合我们看文档啊能够捕获到的一些有限的信息，把这个东西呢真正的给它实现出来啊。首先我们要确定我们到底是要延迟加载还是要非延迟加载，如果你想选择非延迟加载，那么你就用table data这里面的定义方式，一次性的返回嵌套数据，如果你想用延迟加载，那你就用DATA1这面的方式不返回嵌套数据，但是有嵌套数据的这个字段要有has children属性。那个我不知道大家能不能听明白啊，我写一下啊，就是我再把我刚才描述的这个写一下，就是形数据的两种。加载方案是不是啊。

这两种加载方案呢，第一要延迟加载。啊，第二叫我第一叫非延迟加载吧，第二叫延迟加载好，然后接下来呢，非延迟加载需要什么呢？需要我们后台返回的数据结构。并且嵌套数据放在children里啊，一定要放在这个里面，你如果不放在这里面，就会产生刚才咱们这个问题，你要额外的做这个配置对不对？好，你如果放在这个里面呢，就不用做这个配置了，就没有这个它俩对应不上的问题了啊好，然后并且线要数放在children属性中，好这个呢，我是我们说的非延迟加载的方案，然后我们来说延迟加载。

好，然后接下来呢，并且。并且要第一个布尔属性，什么属性呢，叫做。太出准啊。表示当前节点是否包含子数据啊，然后呢，如果has children为true，就证明当前节点包含子数据。

包含此数据哈，如果这个has children为false，就表示当前节点不包含此数据，是不是啊，我再把它复制一下。好，这个是刚才咱们说的has children，还有这个children这两个属性的意义了，然后接下来呢，如果当含节点包含子数据，当我们点击当前节点的时候。嗯，如果当前节点包含子数据，那么嗯，当我们。

这个点击当前节点的时候。就需要通过啊，通过什么呢？这里面有一个方法。这个方法通过漏的方法去加载子数据，所以你会发现刚才咱们第二个表格里面有一个漏的方法，对吧，通过漏的这个方法在这呢。这呢哈，然后去加载它这里面的子数据啊。啊，然后从而呢，让子数据展示到我们的页面当中啊好，然后呢，不要忘了呢，再对照着一下刚才这个它的这个说明当中的内容，看一看有没有落下什么啊，当然了，需要为我们的无论是哪一种方式哈，你需要为你的这个表格指定一个肉体啊，指定一个肉T，那这个后面咱们再具体的去实现它，所以刚才咱们是依据文档，然后又进行了一个总结。