day09/上午/175-尚硅谷-尚融宝-嵌套表格的展示

那普通的数据渲染这块呢，当然会包含EL table，还有data list啊，这两个值呢都是啊我们啊做基础数据渲染的时候需要的一个是呃节点的名字，一个是属性的名字，那后面这块呢，就是和我们嗯做嵌套数据渲染相关的一些属性了，当然除了这个包der之外啊，后面这些其他的属悉，然后下面这块呢，就是table column table column这块呢，大家也比较熟悉了，呃里面label熟悉，还有这个template模板对不对，还有scope啊这样的一个，呃，可以获取数据，呃，数据模型的这样的一个对象，我们都是比较熟悉的，所以咱们呢，我先把这部分的内容复制过去啊，因为里面的这些东西没有必要咱们一点点去写，实际上在企业开发的过程当中，也是直接在我们的比如说element UI的官方网站当中拿到一个table直接粘过去对吧？啊，然后去改属性啊，没有自己去写的，所以说大家啊，我们就粘过去就行了。

把它粘过去。但这种退保自己写的话太麻烦了。然后那么我们把它粘到哪呢？粘到Di下面吧，好粘过来之后呢，咱们先把其他的这些呢，先都给它删一删哈，就是先渲染出来一个基础表格，也就说是类，然后咱们呢，去预览一下先。好，大家看现在呢，我就已经把这个基础表格给它渲染出来了，那么这个基础表格呢，啊，它是是这样的，在这个里面。在这个里面哈，它有一个data list，所以呢，它就渲染到了哪呢，就渲染到了我们的。这个数据模型当中对吧？啊，所以呢，就把这个整个的这个数据呢，就展示到了这个数据列表里，然后这个数据列表里面呢，有1233个列啊，然后其中第一个列呢是名称列，名称列这块呢，我们就是直接指定的就是cope点漏点name，那实际上呢，你也可以不这么写，当然这么写呢，就是未来在这里面你扩充其他的内容就方便一些，那也可以怎么写呢，也可以直接像我们之前一样，在这个地方呢写pro。

等于name。这样也可以是吧，啊，但是你会发现呢，如果我这样写的话呢，好像前面的那个。减角号是不是就没有了啊，所以它这块呢，就采取了。这种用模板的方式啊。用模板的方式，用模板的方式呢，这面呢，它前面呢，就会展示出一个。我看一下啊。哎，那个尖屌号。我看一下啊，嗯。我我先给他改回去啊PP那。

好像是在加载的时候它才有减加号啊。我先把这个这样改一下。行，先这样定义啊，一间调号一会再说，然后接下来后面这个也是一样的编码，编码这块呢，它其实也是用了这样的一个模板，但是它上面这块是这么写的，这么写是什么意思呢？就是啊大家还记不记得那个。呃，之前的叫。对象的结构赋值啊，因为正常情况下呢，你可以这样写就是scope。如果这块是scope的话呢，这块呢就写scope点肉点扣，但是呢，我们实际上呢，是要获取的不是scope本身要获取的呢，是scope里面的这个肉属性，所以呢，我用结构赋值的方式只把这个肉传进来也可以，那如果用几个复制方式，只把scope里面的肉这个属性传进来，那这面呢，我们就可以这样写明白吧啊，所以这块其其实就是给大家提供了几种。

啊，不同的，呃，这样的一个解决方案啊，当然了，目前为止你像这里面我们还没有去定义更多的其他的模板，那么依然是可以怎么写啊，就可以用原来的这种方式去定义都可以啊，所以呢，我还是习惯用原来的这种方式，就prop等于这个take code对吧？啊，所以你可以把它再改成这种简洁的方式啊。啊，写成刚才那种的就是未来，一旦你里面想扩展这个模板内容的话，就方便一些是不是啊，所以直接就在里加就行了，写成这种的就是代码看起来简洁一些都可以啊，两种，然后code我们把这两个写好，所以这样的话呢，对于大家来说可能就是看起来更简单一些啊这个代码。好，然后接下来呢，第三个啊，前两个都是针对一级类别的名称有编码，第三个呢，是针对二级类别的啊，那二级类别的话，目前为止呢，它是没有展示出来呢，是不是是在下一个层级当中，所以这个一级类别的值这块呢，就是空空值啊，这个空值那当然了，你可以在这个地方也像以前一样加op等于Y6。

这样是不是也可以写到上面啊？这样就简单多了哈。比刚才。所以呢，我们其实是可以把它简化成这种写法的，当然了，笔记当中的这种写法呢，未来你如果扩展模板的话会更方便一些，然后这是这款，所以这就是一个普通的表格的一个渲染了，然后接下来呢，刚才根据刚才我们的分析看一下这个element UI里面啊啊，他说呢，要指定这个肉key对吧，渲染树形数据的时候必须指定肉key，所以呢，我们就得指定一个肉key了。

所以在这个地方，我们指定肉等于ID。好，这个就是为我们渲染数形数据呢做准备，这是我们要设置的第一个值，然后接下来呢，我们呢，还要做一个就是这个设置，他说。Table的lazy属性为true啊，然后与加载函数漏，所以咱们还要设置一个table lay属性。Table的lazy属性，然后lay属性为true lay属性为true呢，我们直接这样写就可以了，这就是true的意思啊，这就true，你不写就是bos的意思，写上就是true的意思，明白哈，所以这个呢是table的lazy属性，然后呢，它就是告诉我们呢，这个表格呢，要延迟加载哈，你看这些东西一添加的话，那么就意味着什么呀，意味着这个表格呢，是一个延迟加载，要有下级数据的表格，然后这个时候呢，它就有这个展开按钮了，看见了吧？啊好，但是现在呢，我们的这个展开按钮呢，点击呢还不好使。

你去点击它，它没有反应，为什么没有反应呢？因为还是看这个文档，他说呢，还得去写一个加载函数漏啊，还得写一个加载函数漏的哈，那我们再把加载函数漏写好。所以在这个地方呢，咱们写一个漏啊，对加载函数load怎么写呢？你可以参考一下它这个文档当中的写法，它是这样写的，第二个表格延迟加载叫load对吧？漏是一个属性的定义啊，动态属性最前面是冒号，然后后面是什么呀，是一个漏函数，可以这样写。

好，既然后面是个漏函数，后面这个肯定就得定义出来，那有同学不知道这漏到底是个什么啊，那你也可以看看它的文档，文档里面呢，找到漏就是再往后往后拖啊。找到它最后文档这一块table attributes，看看有没有漏的。这呢是不是好漏的是个什么，是不是个函数啊，它是个函数类型的啊，然后呢，它有三个值，三个值呢就是这个啊，自动传入的参数了，一个是肉，那肯定是当前行了，一个是吹no的，那就是相对应的节点，那这两个大家如果感兴趣的话，一会可以打印出来看看啊，然后这个呢是resolve resolve呢就是啊，一个函数类型，它说加载子节点数据的函数lazy为触时生效啊，当lazy为true时，一个load生效。函数的第二个参数包含了节点的层级信息，这个是包含层级信息的，一会我们具体来看一下是怎么回事，那这样的话我们就知道它有三个参数，Road tree no和resolve，再回头看一下它前面的这个load是怎么调用的。

这是他写的漏是吧，Tree no和resolve是不是啊好，那我们呢，就把他这个呢，先暂时给他复制过来一下，看一看啊。好，这个呢是加载二级节点，好，加载二级节点这块呢，我们。啊。肯定是数据呀，数据呀不是定义出来的，是获取出来的，所以这个数据这一块我们呢要从后台获取，而且呢，它这块呢，是模拟了一个延迟加载，我们呢不需要延迟加载，所以呢，整个这块呢，我们就删掉，就是把它具体的内容删掉啊，我们直接是reserve，就留resolve就行了，然后数据列表，但是resolve你也不能直接，你得先怎么样获取数据，获取数据是从后台获取，获取数据的话呢，和前面是一样的，它也是一个根据负ID来获取我们的。

这个子ID的这么一个呃方式哈，那上面的获取数据在这儿呢，是吧，其实也是它把它拿过来。啊，把它拿回来之后，但是不一样的地方在哪？在这儿你前面那块获取呢，获取的是顶层类别，现在我这块获取呢，我应该获取二级类别了啊是吧，我应该从这一级类别的ID呢拿到二级类别，所以这块呢，应该传你一级类别的那个ID，那一级类别的ID哪来呢？这个时候你就要想到这两个参数了，是不是有一些啊节点信息在呀，所以呢，在这个地方你们可以探一下，点lo去啊，其实这个咱们写代码的时候，有一些事情并不是这一开始就非常明确的，非常明了的一定是猜，呃，猜我这个ID从哪能获取，既然他给我提供了这两个自动注入的参数，那么这个两个自动注入的参数里面一定有相关信息，对不对？所以呢，我就要打印一下，看看有没有我要的内容。

啊，后面这块先屏蔽掉。然后这块呢是脆，这样打一下就是脆本身，然后这块呢是脆no的。弄的好，然后我们来看。页面的我们刷新一下。好，然后接下来什么时候调用的，肯定是点的时候啊，我点一下好大家看tree打印的就是嗯，打印的是什么，主要打看这个name是啥行业是吧，我刚才点的是行业是吧？啊所以呢，就是那个就是这个行业这个数据自己啊是不是，那然后接下来呢，看no。

Tree node好像是这样的一个数据，Tree是什么？Tree是数，就是数据库中取出的那些数据，就是当前的这个行里面，在数据库当中咱们对应的那个Di的数据，对吧？而下面这个node呢？很显然它不是我们这的数据，它封装了一些，比如说这个节点该不该显示，这个节点有没有children准啊，然后这个节点是不是lazy加载，这个节点当前有没有被X expand有没有被展开啊，这个节点的数据有没有被漏的成功，这个节点的数据是不是正在loading中对吧？这个呢是一个啊，相当于no的节点，就是跟他这个节点展示的一些业务啊，跟他节点展示的功能相关的一个一个对象，它封装到这个里面了啊，比如说你看它loading的状态为储，那这面呢，是不是就有个啊这样的一个。

这个转圈的这么一个loading图啊，好，它loaded的状态为false，就是没下载下来，没下载下来呢，就loading图就在，然后里面的数据也没有啊，然后level这是它的级别啊呃，从零开始lazy，这是不是延迟加载对吧？这些定义的都是跟节点的啊，延迟加载相关的一些数据，然后这个定义的都是跟数据库当中的那个数据库表相关的那些属性名，对吧？所以这是两个节点，大家就知道了，那么这两个节点知道了的话呢，我们就要知道我们踩在哪一个。在哪一个参数当中能获取到咱们当前被点击的这个节点的ID呢，肯定是去当中啊，去掉ID嘛，就是当前你要获取的这个节点的ID了，好，那我们在这个地方呢，就可以写。这款就可以写。去点ID了，明白吧，啊好，拿到这个去点ID之后怎么办呢？不是说副值，因为这个值是顶层数据啊，你不能这么去赋值了，应该怎么做呢？看还是看他这个文档。

看他这文档里怎么做的，他是不是调用了方法把。拿到的子节点的列表直接传递给reserve方法，当它参数就行，只要你传递给它，它就能自动处理，那reserve是哪来的？Resolve是不是第三个参数，它是一个回调函数啊，它是一个回调函数，函数类型的参数定义在这儿了，然后只要你把节点列表传给它，它就自动给你做这个啊，折叠状态的一个展开这个显示啊好，那我们就resolve，谁呢？Resolve response.data.list。好，然后我们来看一下。呃，现在呢，我们来展开它，大家看这数据是不是很容易就展示出来了，好，所以其实你只要按部就班的按照它文档当中的内容，以及结合着他文档当中给我们的这个参考代码啊，然后有必要的时候呢，再结合一下后面他的这个文档说明，其实呢，你一步一步的，只要这里面一个blood都给它对照上，是不是这个功能就实现了啊，最开始的时候，你可能在读完这些代码以后，或者是读完这些介绍之后啊，你并没有能够完全的理解它到底是什么意思，但是你只要做的时候，按部就班的把每一个步骤依次给它实现上，诶，最后的结果它就自然就出现了，是这样的一个过程，然后最后呢，我们再来说一下它。

例子当中的这个定义，这个我们就没有必要定义了，为什么？因为我们啊后端接口当中返回的数据和前端它这个组件啊，前端element UI这个组件，它需要的数据模型是一模一样的，这样的话，这句话我们就不写了，那当然现在呢，我们的应用程序呢，也就能够运行成功了，也是我们想要的是吧。