00:01
哈喽,各位小伙伴们大家好。那接下来啊,咱们去完成添加属性与修改属性的静态组件部分。那咱们呢,去看一下的已经完成的这个项目。那对于用户而言啊,他可以选择某一个一级分类。比如说选择手机。那当然也可以选择某一个二级分类,比如说手机通讯。那么当用户选择三级分类的某一项的时候,比如说选择手机。那么会把平台当中的这些属性啊,会进行表格的展示。那当然这一部分功能啊,咱们的已经完成了。那除了这里的这部分功能之外呢,还有一个功能就是添加属性。那么你会发现一件事啊,当老师点击添加属性的时候,那么底部的这个card。
01:03
所显示的内容啊,发生了变化对吧,结构明显不一样。以及当你点击修改属性的时候也是一样,那结构跟添加很相似。那就说明一件事啊。当用户点击添加属性或者是修改属性按钮的时候。那么底部这个card所显示的内容啊,是进行切换的。要么这个表格展示,要么是不是带这个输入框的这个结构进行展示。那么也就是说底下这个card显示的内容呢,是有两部分,而且他俩他俩呢。还未经切换。那么我相信啊,很多小伙伴应该想到了,如果一个内容进行显示与隐藏,经来回切换的进行显示与隐藏,那么要么用V-if,要么是V杠受。
02:01
那当然谁的性能更好一些啊,那当然是V杠受。操作元素进行逼类。进行显示与隐藏。那所以说啊,咱们接下来啊,去把这一部分结构给它搭建好。那咱们呢,去找一下咱们相应的这个组件呢,应该是这个at tr。那首先说现在展示的是谁?展示的是不是应该是这个添加属性按钮和底下这个table。那咱们可以怎么办呢?可以这么办。老师把它两者啊进行带走,放一个div。我给它呢,放在一个div当中。那么外层的这个div啊,你可以给他来一个什么呀,就来一个V杠受这样的一个指令,V杠受。对不,比如说是否显示这个table,那咱们呢,可以通过一个属性进行控制,叫做is show table。
03:01
那当然默认的情况下,也就是说你最开始上来的时候,要不要显示这个table是要显示的。那所以说咱们在这用到了一个属性,那你这里你得定义对不?那咱们呢,这里呢,定义一个属性,比如说这个属性是控制的table的table。哎,表格的显示与隐藏的,哎,与隐藏的。那咱们呢,也叫做is show table。那当然默认值应该是应该是处,因为默认的情况下应该是展示的,那咱们呢,看一下咱们的这个结构,这是没问题的。对吧,明显这个table是有的。那如果你把这里的值啊,你得改为谁,改为false,那是不是就隐藏了?对吧,那咱们呢,可以啊看一下对不对。对吧,那这块呢,相比而言呢,还是挺容易的。那咱们呢,让他呢,默认值,为什么默认值为处。
04:01
好,那咱们呢,去看一下这边呢,有一些小细活啊,咱们需要给他做了,你看你看人家已经写好这个项目,盯住这个添加属性这个按钮啊,你看这儿啊。当老师选择一级分类的时候,你会发现这个按钮是禁用的。对不,当你选择二级分类的时候,它也是禁用的。但是当你三级分类有的时候,你会发现这个按钮是可以使用的。而我们这个不管你几级分类,选中它都是可以用的。那也就是说这个按钮呢,是有禁禁止使用的这样一个效果。那所以说啊,咱们先把这儿呢,也给它完成这个小细活。那有人说冒号disabled,那么什么时候可以用,什么时候不可用?那举个例子,就比如说三级分类你没有选择的时候,那cat gr3d应该啥?应该是空串。对不,你这块要想懂啊,对吧,那这块呢,老师呢,先给他,呃,先给他注释掉,先给他干掉,咱们先把这先想明白。
05:07
那也就是说你三级ID,你看这样,比如说你三级ID没有的情况下,假如说你没有选择三级分类,那没有这个三级分类,那就是没有三级分类的那个CATEGORY3ID,那他能用吗。他不能。对不?那如果三级分类你选择了,是不是有相应的category society了,那它能不能用就不能用。对不对,那也就是说三级分类的这个category ID。那你没有这个按钮是不能用。那有了是不是可以使用。对不,那这块你就可以怎么办,可以这么办了,冒号disable的,那也就是说cat对吧,3ID。那也就是说,如果你没有开的ID的时候,你应该是禁用的。对不没有啥是空串,空串相当于也是转化成或是false加非是不是真是不是真不能用,那如果有的呢,那有了是不是就不禁用。
06:09
所以说啊,咱们都把这个小气活也给他做了,那也就是说现在没有三级分类,那也就是相应的没有CAT3ID它是不能用的。对不对。对吧,但是当你三级分类有的时候,它是不是就可以使用了。对吧,那以及当你点击添加属性或者是修改属性的时候,那这块的table与这个button你的隐藏。那也就是说,当你点击这个按钮的时候。那么我们需要把这个is show table进行啥?是不是进行重新赋值?赋值为啥?赋值为?对不,那咱们呢,就可以搞一下子,那在这儿老师给他来一个叫做艾和click。那么当你一点击的时候,那咱们的is show table应该为啥应该为false?对不对。
07:00
对吧,那咱们呢,可以看一下。走走,再选择一个,当你一点击的时候,是不是隐藏了,那是不是就可以书写你的静态的结构了?那当然还有一个按钮,哪个按钮就是当你点击修改的这个按钮的时候。对吧,应该是这个table第四列的第一个按钮,当你一点击,是不是应该也是展示那个添加与修改的那个页面。那所以说咱们找一下这个table最后一列的第一个按钮,那咱们找一下是不是就是它。对不,那么当你一点击它的时候,那咱写一下子as click,那也是一样,让咱们的is show table也为啥暂时也为false。那咱们看一下能不能进行内容的切换,对吧,手机手机通讯手机,那看一下相关内容是不是可以切换,这是没问题。那咱们接下来呢,去把这块的静态呢给它完成,那这里的静态啊很简单,咱们先看第一个,第一个呢是有一个行内的form,老师为什么确定是行内的form,你会发现它这个没有占一行。
08:12
对吧,这不叫行列放吗?那所以说咱们在这呢,老师呢,给它折上,那咱们呢,再来一个div,那这块的结构呢,是添加属性或者是修改属性的结构,哎,修改属性的结构。对吧,那这块呢,咱也给他来个div,那这块呢,就是相当于写个啥是V杠受啊。跟咱们的is show table干啥,什么取法?那虽然说最开始的顶上呢,有一个EL杠放,而且呢,应该是行内放。那当然啊,咱们现在呢,不需要收集数据,这些动态先可以给他干掉。那以及啊,在它的这里面有一个什么,是不是有一个EL-input。对不,那咱们呢,当然也不需要收集数据,咱们先把静态先给他完成。
09:03
那咱们先看一下有没有相应的,呃,这个结构。对吧,那咱们看一下咱们的这个走手机对吧,选什么都行。看一下有没有。对吧,但是呢,这块呢,要注意一件事啊,什么事,咱们这个EL行内form应该是写错了,对吧,EL-form应该是in line应该是它。对吧,那这块呢,咱们要注意一下的,那这块呢,老师给它干掉啊,应该刚刚是忘记保存了,对吧,那这块呢,要注意咱们需要用到谁,用到的是不是EL-form-it。里面带啥带input,那当然咱们目前而言是不需要收集数据。对吧,哎,刚刚是不是少了一个艾,那这回呢,咱们看一下咱们的结构,那为了方便老师不想每一次都点,你可以怎么办呢?你可以让他上来的时候,就为啥a false这样去写咱们结构是不是不用老往来回点了。这不,这样的一个结构。
10:00
那你要注意,Label这玩意叫啥叫属性名?对吧,那咱们这块的这个label你得改一下这叫啥,这叫属性名。哎,属性的名,那以及啊,你会发现这个input啊,是有这个占位的这个东西对吧,请输入属性名,那咱们呢,给它来一个叫做place holder。啊,对吧,P啊ODR。它为什么咱们看一下子啊,看一下子A。这个结构啊找这对吧,那这个呢,咱们呢,看一下它应该为什么,应该为看它叫啥叫,请输入属性名。那这块呢,咱们写一下子叫做请输入属性名,哎,请输入属性名。那咱们看一下那这块的结构是不是有那点意思。那以及呢,在底下这里呢,有两个按钮,一个是添加属性值,一个取消按钮,那紧随其后啊,咱来两个按钮呗,EL but。
11:03
那这个是什么,咱们看下名字啊,叫添加属性值叫添加。属性值。以及啊,它呢,是有一个icon的,是一个加号对吧,EL-icon杠。Plus。那咱们先看一下子对吧,看一下咱们的这个,这是没问题的,那以及啊,还有一个取消的按钮,而且不带任何颜色,那就是EL-button。那咱们的就不要type了,它就没有那个颜色了,以及叫做取消。那咱们来看一下咱们这个结构是不是OK,没问题。那以及啊,在底下呢,还有个table table呢有四列,而且第一列序号呢,相对它的宽度呢比较小。那所以说咱们这儿呢,给它来个EL-table。对吧,那要注意EL-table呢,暂时呢,咱们也没有展示的数据,先给他干掉。对吧,那要是table呢,是有那个边框的,那所以说啊,咱们给它加一个border。
12:05
而且呢,第一个的label啊,应该叫啥叫序号。对吧,那咱们应该知道它的prop就进行替代了,用谁,是不是用type,为什么是为咱们那个index。而且这个序号的值啊,应该是居中的,所以说ala。Li,为什么呀?是为咱们的center,哎,Center center。好老师呢,给他格式化一下,稍微给它格式化一下,好看一下。那以及啊,底下这里面呢,还有相应的几个,是不是还有相应的,呃,这个两列对吧,Corner。那这个呢,咱们的搞搞啊搞搞。这个宽度啊,这个咱说一下这个宽度呢,咱给他来个80。对吧,剩下那两者呢,咱让他均分对吧,那剩下这两者你就直接写Y。White,为什么为white?对吧,之后呢,咱们的格式化一下,先看一下啊,当然这个名字你也得改,这个改成什么呢,咱们呢看一下啊。
13:06
看一下。那这个呢,不应该叫label了,应该叫什么呀?叫做属性值名称和操作对吧,那这块呢,叫做属性值名称。哎,属性值啊,应该是这个label啊,是这个label。对吧,那这块呢,应该是属性值名称。属性值名称。对吧,那以及咱们再给它复制一个。那这块呢,叫什么叫操作。对吧,那这个呢,咱们也给它格式化一下,这块呢叫操作。对吧,那咱们看一下它静态的结构是不是有了。对吧,这不这样的一个结构嘛,但是呢,要注意啊,这个table跟顶着跟底下是有这个距离的,那咱们呢,可以给它加一个钥匙,就是给它加一个magic。对吧,哎,Mar j marin,那咱们的上下给它来个20左右呢,来个零。
14:02
对吧,那咱们先看一下有没有这个边距,是不是有了,那以及在底下呢,还有两个按钮,就是保存跟取消,那咱们在底下呢,可以再来两个按钮,EL杠,Button。那这个是什么,是保存。对吧,哎,保存。哎,保存。那以及啊,底下呢,还有个按钮EL-button,而且呢它呢是没有颜色的,叫做取消。对吧,哎,叫做取消。对吧,哎,取消。那咱们呢,去看一下咱们的相应的结构,那这应该是没有问题的,对吧,咱们登录一下看一下应该是没有问题。对吧,那以及点击取消的按钮的时候啊,又应该展示那个列表,展示那个table。对吧,就咱最开始来的那个地方。那所以说咱们可以在这儿可以搞一下子,就当你点击这两个取消的时候。让咱们的is show table,为什么为true,让他再回去?
15:00
对不,那以及这块呢,也是一样,ADD click,让咱们的is show table为什么为true。那咱们呢,可以看一下子刷新看一下对吧,一点击取消是不是又回来了。那这块呢,要注意一件事,那咱们呢,还是要测试一下的O不OK。对吧,哎,这是没有问题的。那所以说啊,咱们完成了添加或者是修改的这个静态,那这个静态呢,还是没有什么难度的。OK吧?
我来说两句