day05/下午/100-尚硅谷-尚融宝-table组件的使用

接下来呢，我们根据刚才我们已经学到过的，怎么样去查找文档哈，然后怎么样去把这个文档当中的这个组件应用到我们的页面当中，我们试着呢，自己去整合一下这个表格，那么如果要整合表格的话呢，就在组件当中呢，我们就得找到一个。Table看看有没有表格，这有个表格啊，然后如果你不太好找的话，比如说你这个地方看了半天你不好找，那你就CTRLF就行了，CTRLF，然后table好，然后你看这边就定位过来了，然后我们点击一下它就行，那这块呢就是一个基础表格啊，基础表格呢，你看它这边呢，就展示了一个数据，那我们来看一下它的代码是怎么写的。首先呢，这个是它的一个基础表格部分的一个核心的元素，叫table啊叫table，然后接下来呢，在这个下面的这个代码当中呢，有个data塔对吧？Data里面呢，很显然这个就是表格中的数据嘛，这是一个一个的数据，当然了，它不是从后端取出来的，它是应编码编进来的，那也没有关系，我们呢，就看一看它是怎么用的，在data里面呢，它用了一它定义了一个叫table data的，那这个table data呢，既然能够显示在上面的表格当中，一定呢是被这个表格呃某个地方绑定了，我们会发现表格里面有个data塔属性，这个data塔属性呢，正好就绑定了这个data塔数据，而这个data塔属性还是前面用冒号写的，就说明这是一个数据绑定，对吧，省略了v band嘛，所以呢，这个表格它有一个data属性，Data属性绑定了table data，那这样的话呢，在表格里面呢，就能展示我们的具体的内容了，我们来试一下。

所以呢，在这个位置我们写一个表格啊，表格里面呢，它中间的这部分内容呢，我们先把它屏蔽掉啊，先不用管它，然后呢，Data，人家定义的是table data，我们定义的是user list，对不对？好，所以这块呢，就是user list，好，然后这个很简单，就是100%的宽度嘛，然后我们现在再来看里面的内容，里面的内容呢，很显然它这里面的123叫EL table column。

啊，那一包，诶，我看一下。粘那怎么有点不对了呢，从粘一下上面怎么变成。我再保存一下，好等一下大家发没发现我这个保存有点问题，就是这块挺坑人的哈，你看啊，我我复制，然后我粘贴是吧。推吧推吧，然后我已保存。看着变化了吧，我一保存它是不是把那个table给我变成table了，再来一遍啊。这块是EL table吧啊，这块是EL table column，这块是EL table，然后我一我1CTRLS，它是不是给我变成table column了啊，这块就有点坑人了，那我我我再CTRLS一下不行，我再CTRL我给他删了吧，所以这块一定要注意啊，是我的那个自动完成功能，它擅自把table变成column了，那这个大家一定要注意你自己，你自己复制的时候也要看准了再复制啊，所以最好就是你你看我有经验，我复制完了我一下就看出来，你看大家如果没有经验的话，可能复制完了也看不出来，那你就一行一行复制，少点复制哈，好，然后这块呢。

怎么做呢，就是这块很显然刚才我们说的要把这个绿色例子放到这儿啊，然后后面这三个呢，很显然的就是列了三个列嘛，我们看它的例子。看他例子，这不是日期，姓名地址这三个列嘛，那这三个列有什么特点呢？就是都是用EL table column来定义的，对吧？啊，这是三个列，好，这三个列elt column里面呢，分别有三个属性，那这三个属性最后一个外很好理解，就是宽度嘛，然后呢，这个label也应该能猜到，就是这个列的表头。你看叫日期姓名地址对吧，就列的表头，那现在呢，我们想展示序号，姓名、年龄，Email，那我们呢，就弄四个列出来，分别呢叫序号姓名、年龄。

Email好，然后接下来呢，它这四个列里面呢，还有一个叫pro的这样的一个属性，这个pro呢，你看它叫data name和address，然后你再结合他这个代码看一下它这个数据列表里面是不是正好有三个列叫data name和address，就说明什么，就说明我们当前的这个。黑豹这个表格里面呀，它应该绑定什么呢？应该绑定我们数据列表里面的这些属性的名字，好，那我们数据列表里面的属性名字呢，分别叫name。叫age啊，还叫email啊，然后呢，这个index不是属性啊，不是属性不能直接写到这儿，所以这块怎么办呢？一会儿我们再说，我们先把它屏蔽掉好，然后接下来呢，我们来看一下。

大家看我这个表格呢，是不是就展示出来了啊，就非常方便的展示出来一个表格，那么。对比以前我们写的这个表格呢，那我们以前写这表格就有点太不好意思见人了哈，我把它删掉吧，有点难看了，把它删了吧。好，这就是我们的一个表格了，然后接下来呢，我们来看一看，这个是一个表格的一个基本用法了，好，那后面这块呢，还有就是比如说嗯。这这些不太重要的，我就先略过去了啊。比如说呢，它这个里面，你看它就前面有个序号对不对，哎，它这个序号是怎么加的呢？我们看一下显示代码。然后呢，很显然这个序号列呢，是日期列前面这一列，所以我们先找到日期列，日期列前面这一列有这么一个table，我们把它复制过来。

好，我们把它复制到这，这个呢，其实就是序号，然后呢，只不过它没写表头啊，然后呢，注意它和其他的这个列不一样的地方呢，就有一个type type的值呢是index，我们来看一下结果先，你看是不是自动给我们增加序号了，都不用我们自己处理啊，那这个是在哪儿能够看到它的相关的说明呢？在下面也是最后面这个位置，有关于表格的属性，我们找一下它的文档。这个是表格的属性啊，比如说刚才我们表格的属性里面是不是有个data呀，就是他。啊，那他呢，就帮助我们绑定什么呀，绑定数据的啊，所以它这个地方就说显示的数据对吧，类型必须是数组的好，然后呢，刚才我们看到的其他的属性呢，都在列里面，所以呢，我们再往下看，还有一个呢，叫做。

Table column attribu叫表格列属性，表格列属性这块呢，就有一个type了，Type呢，它有1233个值，其中有一个值呢，可选的值啊，叫可选值就是index啊，如果设置了index的话呢，则显示该行的索引，而且这个索引呢是从一开始计算的，所以呢，这个就是type等于inex的时候，我们的表格呢，就会有一个从一开始的索引了啊，那么顺便呢，我们可以看一下，如果写selection的话，那就可以显示一个多选框，诶我们可以试一下。那么在这个位置。我们再来一个表格。啊，然后这块呢，我们写拉式，好，然后呢，在前面这个地方我们可以看到，你看是不是有一个多选框了，而且呢，它能够帮助我们完成这个全选啊，全选和全部取消选择的这样的一个功能，所以这个就是element UI的一个表格的功能，还是非常方便的哈，好然后接下来呢，我们再来看一看它还有没有什么其他的功能，比如说我们还是看它这个。

嗯，Table。Table attribu啊，然后它这边呢，还有一个叫borderder borderder呢就是给这个表格呢，有一个纵向的边框，那我们现在这个表格呢，它只有横向的边框，它是没有这个每一列呀，还有这个表格的这个边框这块它是没有纵向边框的，所以我们可以通过包给它添加一个纵向边框，那填到哪呢？填到table里面，因为它是table的属性，所以呢是高的。好，我们看这表格是不是就有纵向的边框了啊。这是它纵向的边框啊好，然后接下来呢，我们除了这个纵向边框之外呢，还有这个就是strip叫是否显示斑马纹table啊，现在我们这表格里面的这个数据呢，都是一个颜色，当数据特别多的时候呢，就是容易视觉疲劳嘛，然后我们给它展示的好看一点呢，可以给它添加一个抓，这样的话呢，大家看我这个表格，你看就隔行换色，就自动有了这样的一个斑马纹的颜色，那展示起来呢，会更清晰一些啊这个表格，所以呢，其他的内容呢，大家可以根据自己的需要呢，你自己去看一看啊，有需要的你可以自己去加，那刚才我讲的这个呢，就是比较常见的一些啊使用的啊一些属性了，所以这块呢，是我们的一个呃，表格的一个应用了，那啊到这为止呢，一些基本的简单的element UI的这个使用方式呢，我们也介绍完了，那么最主要的方式呢，其实就是什么呀，就是看文档编程，那大家一定要注意，有的是，尤其是未来我们在学习啊一些新的。

知识的时候，并不是说一定要把这个知识从头到尾学完，咱们才能着手开发像这种工具性的东西啊，我们就像字典一样摆在那块就可以了，然后在做项目的时候呢，随用随取，随用随查啊，然后大家能够做到会查询会找答案就可以了啊，所以说这就是element UI的一个简单的介绍，那么更多的组件和功能呢，我们会在后面的项目当中呢，再给大家进行一个详细的介绍。