00:01
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去完成咱们品牌管理的静态组件。当然啊,咱们呢,只是完成静态组件,那动态的这些业务逻辑,咱们随后再去进行处理。那咱们呢,先看一下子已经完成了这个项目的一个静态的一个布局。那首先说这里呢,是有一个按钮,以及带一个icon图标。那以及紧随其后呢,是用到了一个饿了么UI当中的一个UI组件,叫做table表格。那以及啊,底下呢,有一个咱们很熟悉的一个小小的一个组件,就是扉页功能,因为扉页啊,在咱们的前台项目当中啊,咱们自己也曾经封装过。那所以说啊,咱们呢,先把它的静态组件先给它完成。那看一下子咱们正在开发这个项目啊,当然咱们这里面什么都没有呢,那所以说咱们一点点的把它给它完成。
01:04
那咱们呢,回到咱们的这个trademark品牌管理的这个组件当中,那咱们的1.2完成。那首先说啊,它呢是有一个按钮的,那咱们呢就来一个,那咱们呢用谁呢,EL button。那ell巴特呢,其实是咱们最开始接触的一个饿了么UI当中的一个UI组件,它使用的频率呢,当然是非常高的按钮,对吧?那当然它叫做添加。那咱们呢,也给他来一个标题,叫做添加那一集啊,它是有icon图标的。那咱们呢,就给它来一个icon图标,为什么呢?为EL-icon-plus。因为咱们也看到了,它是有一个加号的这样的一个效果,对吧,那当然对于顶上这里啊,它还是有点间距的,那所以说啊,咱们呢,给它加一些钥匙。
02:00
那咱们呢,给它加一个margin上下的,咱给它来一个十像素左右零,那咱们看一下子有没有相应的外边距,看一下咱们的,哎,这就OK了。那以及啊,紧随其后呢,是有一个什么呀,是不是有一个咱们的哎表格这样的一个UI组件。它呢,其实呢,也是饿了么UI当中的一个UI组件,叫做表格组件,表格组件。它叫什么?叫做EL杠,Table。那这里啊,老师呢,把它这块呢,给它折上来,咱们呢也稍微的去说道说道。那么首先说EL table啊,它是饿了么UI当中的一个表格组件。当然咱们现在只考虑静态的东西,那咱们先说一下子这个date是什么啊,这个date。贝贝呢,是表格,哎组件将来哎需要展示的数据,而且呢,它的数据呢,一定是数组类型的。
03:04
到时候呢,老师呢,会带着你们呢,翻看一下他的文档,当然咱们现在不需要展示任何数据,那这里面呢,咱们先给他干掉。那这里呢,要注意一件事,什么事,饿了么UI当中的表格呢,是一列一列的,而每一列呢,用的都是叫做EL-table-column啊这代表的是一列,当然这个呃,EL-table-column这个组件当中啊,它还有一些啊属性,咱们一会儿呢回手再去看这些属性。那你要注意这代表是一列,那咱们看总共是几列啊,是不是四列,那所以说啊,咱们呢,还需要再复制三个啊coll,比如说四列两列三列四列对吧,那咱们呢,给它格式化一下。那咱们呢,稍微说说啊这个组件,那咱们呢,去找一下它的文档。
04:02
那这里呢,老师希望你们啊,对于将来看这个文档啊,你得看的溜一些对吧,那咱们想要找的谁找的是组件,那咱们就搜一下子,搜谁呢,搜table来看一下。那首先说啊,咱们的一个去找找,那首先说API呢,一定是在最底下啊,一定是在最底下。咱们往底下发展。对吧,那咱们来看一下子,它table要注意啊,Table是一个组件,Table呢经常结合table column嵌套使用啊,这要注意,Table是一个表格,T代表是一列,总共是四列。那咱们先看一下咱们现在展示的这个表格,和已经哎写好这个表格还是有区别的。对吧,那首先说啊,你看人家已经有了这个表格啊,它是有边框的,你看嘛,这个细活是不是有边框,而咱们是没有。
05:01
对吧,竖着方向是没有变化,对吧,特别是在这也没有,那咱们看一下。它呢是属于table组件的一个属性啊,咱们先看看,首先说呢,咱们刚刚看到了一个叫做date,它是属于table的属性,这要注意啊,这是叫做table,这叫column。胚布属性当中,咱们刚刚删掉了一个对的,它是什么?是显示的数据。而且数据类型呢,是没有别的类型。对吧,而且咱们会发现咱们将来要写这个table啊,是要带边框的,而咱们现在没有它呢,也是table的一个属性,叫做什么呢?哎,叫做border,咱们找一下子老师也带着你们看一下子啊,叫做border。哎,咱们这样呢,搜一下子搜一个叫做Bo DR border啊border边框。对吧,啊,其实啊,它是有这个属性的,叫做border啊border。包啊,咱们呢,可以看一下子啊,这个没什么难度,看一下子你看这是不是就有相应的边框了。
06:05
那所以说咱们得做一下笔记包der是什么呀?哎,包的是给咱们的表格添加边框。哎,而咱们的项目当中,这个表格呢,是需要边框的。对吧,啊,这不有那点感觉了吗。那首先说啊,咱们再看每一列一列一列一列啊,这叫column,叫一列一列啊,首先说你看啊,它每一列都是有一个标题的,比如说序号,品牌名称,品牌logo啊操作它其实是谁呢?就是这个label啊,就是这个label啊label呢,咱们写一下这是谁的啊,这个是column col啊UMN啊MN的相应的属性。那首先说label是什么,那咱们找一下它的文档,咱们呢也看一下,其实啊,就是设置它的那个标题的,哎,找一下table。
07:02
Table。那咱们来看一下呢,还得是找到最底下,记住API一定永远是在最底下,那咱们要找的是关于column的属性。对吧,那咱们看它其中呢,有一个叫做label label呢是显示的标题,而且是字符串形式的。所以说这块咱们写微博是什么,是显示的标题。那第一个,那第一个叫什么叫做序号。哎,序号那咱们呢,保存一下子,你看一下子是不是就相应的改成序号。对吧,那以及还有别的,比如说叫做品牌名称,品牌logo,那咱们都改一下子。那这个是什么呢?是品牌的名称。以及底下这里呢,叫做品牌的logo,哎,品牌的。品牌logo。以及呢,在最右面还有个叫操作的标题,那咱们把这里也给它改成谁啊改成操作,哎,咱们呢,看一下是不是有这点意思。
08:04
对,不但是你要注意一件事啊,跟已经写好的这个呢,效果还是有点不同的。那首先说啊,它一共是四列,那咱们也是四列,只不过现在没有展示数据,但是你要注意啊,第一列的宽度明显比别人窄的是不是小很多。对不,你看明显小很多。那这里面会用到谁呢?用到的是一个叫做Y的这样的一个属性对应列的宽度。那这里呢,咱们也写一下子,Y的是什么,是对应列。的宽度。宽度,那咱们呢,可以看一下它相应的属性值是string对不?那比如说第一列它的宽度呢,明显比别人打的小,那咱给他来一个80像素或者写80都可以。而其余的那仨呢,是均分的。对不对,对吧,而且呢,还有个细活,你会发现第一列的这个序号,哎,这个文字是居中的,而咱们不是居中对吧,那这个呢,是需要用到谁呢?用到也是它的一个属性叫做L。
09:11
哎,对齐方式,那咱们呢,可以去找一下子老师呢,也带着你们都看一下子,看这lend对齐方式。有呢?左。中右三个对齐方式。那所以说咱们写一下的A类是什么,说标题的对齐方式。哎,对齐。方式。那咱们呢,给它加一个a Li,为什么呀,是为center cn t,那咱们呢,保存一下看一下的有没有啊居中。对吧,这不有点感觉了吗?只不过咱们现在没有什么呀,是不没有这个数据而已啊,咱们现在只需要考虑什么,考虑静态。那以及底下这里啊,他用到了一个叫做分页器。
10:01
对不,那菲尔,其实在咱们前台项目当中,咱们自己也封装过。对吧,那当然咱们这里面呢,就不用自己再封装了,它需要使用到的是分页器的这样的一个组件叫什么呢?叫做EL-page啊,当然咱们选择for的这个啊,For这个是所有的常用的属性和方法都会出来。对吧,那我不知道你们还记不记得,咱当年封装分页器的时候,你该知道是不是有几大因素,是四大因素。第一个是当前页。哎,当前第几页。对不第二个啊,数据的总条数。对不对。对吧,你想想咱当年当前第几页数据总条数这些你是不是都得知道啊,那咱们看一下,那首先说开润的配置是什么,代表的是当前第几页。对不?哎,把咱们当年封装啊,扉页那个四大的那四大属性老师我给你找到,比如咱当前随便来一个,比如来一个第六页。
11:04
对吧,啊,当然现在写的是假的数据啊,那以及有总共有多少条数据。这不,这呢。对吧,那咱给他拿过来,咱们现在呢,也给他来一个什么,来一个呃,死值吧,比如说99。那以及咱们当年还说过,还需要有一大因素是什么,说每一页。哎,展示的条数。那这个是谁,就是配置菜。对不page size。那咱呢,给他拿过来配置size,咱得来多少呢?来一个三吧啊。比如说呢,一共99条数据,每一页有三条,那一共是33页。对不对,对吧,哎这块要注意,以及当年咱们呢,还有一个叫做连续页码数,哎连续页码数,当然饿了UI当中给咱提供了这个属性,就是连续页码数,咱们一会再说。对不?那当然它底下还有两个事件,这两个事件分别是什么呢?第一个当你点击某一页那个按钮的时候会触发,以及当每一页啊个数发生变化的时候,也会触发这个事件,当然咱们现在只考虑静态,那这些GS东西呢,咱们呢可以先不碰,老师呢先给它放在这。
12:16
对吧,先给它做成啊呃,注释。对不,那咱们呢,来那这块呢,是每一页显示条数啊,咱来个先来没那么多数据啊,三五十吧,哎三五十,那咱们呢,先给它运行起来,先看一下效果。对,不是不是有这点感觉。对不对,当前是不是第六页,一共是不是,咱刚刚也算了,你看是不是33页。总共99条数据,每一页三条,那是不是99除以三,是不是33页。对吧,当前第六页啊,33页,而且你要注意啊,它默认的连续页码数是几个,是五个。对吧,而且咱们当时也说过,连续页码数为什么是奇数,你看45678为什么是奇数,数不对称。
13:03
对不啊,这是它,那咱们呢,去对照了,已经完成的和咱们的,你看一下它还是有差距的。那首先说这个飞热器跟顶上这个table是有间距的,那所以说咱们呢,给它来一个样式。那咱们再给他来个什么呢?就来个margin top吧,给他来一个20像素。来看一下子有没有点间距。对吧,而且你还要注意人家的分析器是不是居中,而咱们是不是靠左。那这个呢,你得写样式啊,咱用谁呢?用test alone啊,为什么为居中。对吧,那你会发现咱们整个分页器它就居住我。对不啊,所以说饿了么UI当中的这些UI组件呢,使起来还是比较简单的,对吧,但是你需要给他玩的熟一些。对吧,以及咱们来看一下啊,这是人家的,那你会发现啊,每页展示的条数,你看每一页展示多少条数据,这你看它的结构和总页码数,它都在右面,而咱们的这个是不都在左边呢?你看一下。
14:12
对吧,你看这是不是,呃,肺叶气加上去第几页。咱这是不是也是非热器加上去集体,但是你会发现人家的这个呃,配置size和total是在右面,而咱们在左边。对吧,那这块呢,咱们呢也可以调,就是通过这个layout的可以调他们的位置。说total,你看现在老师举个例子,比如total和size,老师给他俩调换个位置,你看total和size to TL你看只要把它俩位置一调,你看结构是不是就变化。对吧,你看透透是不放这来了,但是他俩呀,应该在最右面,那所以说咱们把它两者呢,诶。给它放在哪呢?放在右面,哎,放在这儿。走,你。
15:01
那这呢,多了一个逗号,咱给他干掉,但是咱们看一下跟咱们跟咱们想的是一样的是一样,但是你要注意跟人家已经写好的还是有区别,人家已经写好了,这个page size和total在哪,在最右面。对不,咱也是在右面,但是不是最右面,对不,那这里面咱们可以怎么办呢?可以这么来,来一个小箭头,直接让size和total直接去右边。对不啊,所以说呢,对于这个静态布局呢,没什么难度,但是这里面老师呢,也得说说,那首先说啊。这个属性是什么?咱们都说说这个属性,这个属性代表的是当前的第几页啊,代表的是。啊,当前第几页。那一节还有个叫total,那total就不用说了,哎,Tot这代表代表分液器。哎,一共需要展示。
16:04
数据的条数。对吧,那以前还有个叫做胚之size,那这是什么呀。这代表什么?代表的是。每一页,哎,每一页需要。展示多少条数据?对吧。那一节这块可以干什么?是不是可以设置每一页展示多少条数据,叫胚之啊胚之。杠三字多了个S,这代表的啥是可以啊,设置每一页哎,展示多少条数据,你是3.5条十条可以进行切换。那以及layout layout它可以干什么?是不是可以实现啊,实现分页器的啥布局?对,不就是你怎么布局,取决于你的顺序。对吧,哎,这是它,那这里面呢,老师呢,要说一下,咱当年封装分页器的时候,还有个叫做连续页码数。
17:06
其实它呢,也是一个属性叫做什么呢?叫做page count冒号。哎,冒号叫做胚啊,胚杠Co-count。比如说啊,老师给他来个几个,来个七啊来一个七。但是啊,老师呢,在带你们看之前啊,咱们先看一七代表什么。七代表的是你这个分页器在这显示页码这个按钮的个数,你看1234567,那连续页码是不是五。对不,那假如说你这改成几呢,改成九。比如说你这个分页器呢,一共要展示九九个小按钮,那连续页码数是就是七个,你数吗?12345678是不是九个。对吧,其实还有一个叫做page啊counter,他们应该是谁的属性呢?咱们看一下子应该是啊page nation,那这个老师也给你们找一下子叫做page nation。
18:07
啊,Pai。那咱们呢,搜一下叫做EL-PA。PA应该出来了吧?找一下。叫pay啊,Nation找一下应该是单词写错了对吧,那咱们找一下这个单词叫pageg nation。就是他。那咱们去看一下这个相应的属性啊,这个属性咱们还是得看一下,对吧,那一定是在最底下咱们找一下。他呢有一个叫做这呢胚筋抗。页码按钮的数量。对吧,那所以说这块咱们也写一下子啊,这块写的叫page啊,Count down count count是按钮的数量。按钮的数量。数量那这块呢,一定要注意啊,如果说如果啊,如果你的配置抗的是几是九,那你要注意连续的页码是几是七。
19:07
为啥呢,前面有个一。要注意啊,如果是九,连续页码是七,前面有个一,后面有个总页码,中间是不是七个。对吧,所以这块要注意一下子,可以通过配支杠套可以设置连续页码数。对吧,所以这个需要注意一下。
我来说两句