day07/下午/144-尚硅谷-尚融宝-保存功能的表单实现和脚本优化

好，渲染模板这一块呢，我们来看一下，主要呢，我们也是要用到element UI了，那这面element UI呢，我们要用到表单组件，表单组件这块呢，咱们就需要什么用什么就行了，所以表单组件这一块呢，我建议大家直接参考咱们的笔记，然后把笔记当中的这个表单模板啊，我们的第一个表单我们先复制过来，复制过来之后看一看这个表单里面都有什么内容，这样的话我们就可以了解到这个表单怎么去创建了，所以呢，我们整把整个的这个餐费的先给他复制一下。好，我们找到我们的页面，直接把这个temp呢给它替换一下，好，这就是我们的表单组件了，我们先来看一下它的效果哈。这块你看就是表单嘛，是不是啊好，然后接下来呢，我们来看一下，在这个表单当中呢，它有呢啊一个EL form，这个就是表单组件了啊EL form里面呢，有一个EL form item啊，每一个EL form item啊就是表单当中的一行，好那么这里面我们表单呢，一共有四行，借款额度积分区间开始，积分区间结束以及保存按钮，所以呢，在这个里面呢，我们就有四个计款额度积分区间开始，区间结束，然后这个是保存，这呢保存按钮哈，好然后每一个前三个啊，它都有一个label label的话呢，就分别展示的是啊这个用户交互组件的这标题，借款额度积分区间开始，积分区间结束是在这个label里面定义的，好，然后这个地方呢，定义的是label wise，也就是label的宽度，也就是说这面啊，它占一。

120像素的宽度啊，定义这面的宽度的就是好，然后接下来呢。接下来呢，我们再来看这款，就每一个EL form item里面都有一个EL form EL input number，这个EL input number呢，它实际上是一个数字输入框啊，这个数字输入框呢，就是这个，你看就是这样的嘛，对吧？啊，它可以去可以去定义数字的啊，所以这个是数字输入框，用e form number来定义，然后呢，这里面呢，有个mini mini的话呢，其实就是它的一个属性，就最小值是零，你看我就点点零，那零你看这就不能点了，所以这个是最小值是零，好然后接下来呢，每一个这个EL form啊EL input number呢，都有一个v model，那这个肯定就是双向数据绑定了，绑定到哪呢？绑定到我们的这个数据模型当中，Integ grade啊，然后integr grade你首先要定义在这啊，第一个对象定义完了之后呢，这个数据模型当中呢，有三个属性，一个呢是借款额度，一个呢是积分区间开始，一个呢是啊，积分区间解。

数，这样的话呢，我们在。啊，双向数据绑定当中呢，就把这三个属性呢，就绑定到这个数据模型当中了，这个时候呢，大家看我F12。

刷新一下啊。刷新一下呢，这里面有一些错误，你先不用管它，因为有些属性我还没有定义呢，然后呢，我们先看这个view。然后呢，在这个地方呢，我们看这个APP main里面的这个form啊，那这个form里面呢，你看是不是刚才我们定义的integrrate的这个对象啊，然后这个对象里面不是有三个属性嘛，在我们的表单当中，我们定义的这三个，一个是borrow amount，一个是integral and，一个是integr start，然后这个借款额度，比如说我定义二，那你看这个地方是不是就赋值了，双向数据绑定了嘛，这个地方比如说我定定义三啊，这个地方就赋值了啊，这个地方我第一次啊，这个地方就复值了，所以说当我们在页面当中输入数据的同时呢，这面的数据模型的数对象呢，就被绑定上，这面的数据模型的对象一旦被绑定上了，就意味着我们这个对象就有值了，这个对象有值了，其实就说明这个this.ineg great就调用的就是他们就说明这个有值了，这个有值了之后，你一调用save data塔的时候呢，这个值是不是就传递给save了？好，Save方法在哪？就是在这儿啊，那么这个远程接口调用是不。

是不是就执行成功了，好，所以这个呢，就是我们通过这样的一个表单当中的数据模型啊的双向数据绑定功能，然后给我们的呃，数据模型当中的这个integral轨做数据填充啊，这样的一个完整的流程，然后我们刚才说完了上面的ER form item之后呢，我们再来说一下这个ER button。Button这个里面呢，你看我们就定义了一个click啊，那就调用了我们的save or update，所以它呢，就调用了这个save or update保存或更新，那么在保存的时候呢，它就调用了save data方法，也就是刚才我们写的这个后台的管理的这个save data方法，然后嗯，接下来呢。我们调用完这个save data方法之后呢，我们再这面再看一下，还有一个叫做able的叫save b t able的这么一个，呃，这个绑定的这么一个数据，它是绑定到了这个带有冒号的这样的一个属性上，说明这是一个数据模型，这是个动态的值，对吧？如果这是一个动态的值的话，那么一定会先定义在这款才行啊，我先定义出来再说。

比如说我们先给他一个。如果它是false的话呢，大家看这个保存按钮呢，就是可用的啊，如果它是处的话，大家看这个保存按钮呢，就是禁用的，所以说这个属性是干嘛的呢？就是否禁用保存按钮好防止表单同复提交啊，是做这件事情用的好了，然后接下来呢，我们默认情况下呢，就是不禁用，默认情况下不禁用就是disable的是禁用掉，那false就是不禁用好什么时候禁用呢？当我一点击这个c update的时候，我马上把它禁用掉，防止用户他在疯狂的刷新，或者疯狂的点击这个保存的时候呢，形成一个重复提交，然后呢。

我们在哪个地方去进入，他是在这个地方一点击save update呢，我们就禁用保存钮，第第2S怎么处好，然后接入完了之后，我们紧接着在调用新增好，这就是我们整个的呃，这样的一个业务逻辑了，那接下来呢，我们简单的来测一下啊界面，我们比如说借款额度随便写吧，111啊，然后点保存。你看是不是保存成功了，好，保存成功了之后呢，我们来看这个积分等级列表，积分等级列表这块是不是就新增了一个一呀啊好，再新增一个，比如说借款额度啊，啊随便保存，然后这面是不是就又新增了两个两条记录啊好，然后有一个问题就是我希望呢，我在每次点保存的时候，我一点保存它就别在这个页面上停着了，反正我也要跳到这块，看看它存没存成功，所以我每次点完保存的时候，能不能自动给我跳到这个页面，这个呢，就是我们自己在做上面的这个路由的跳转啊，因为目前为止我保存新增的时候路由，路由是这个新增完了之后，我想让这个路由跳转到这儿来，所以呢，咱们在保存完之后做一个路由跳转。

那么在哪进行这个路由跳转呢？我们就在save data这个success后面这个地方叫this.dollar这个也是啊，这个里面的一个关键字就是它会。将这个路由的地址做一个改变，改变什么呢？写一个push，你想把路由改到哪去，你就把谁push进来就行了啊，然后呢，这样写就是。

Cor，然后呢，是我想把路由改到这个地方来哈。好，这样的话呢，我这个路由呢，就会就会改到这儿来，然后所以呢，我们再来试一下新增，然后这块呢，是然后点保存，大家看这路由就跳过来了。明白吧，所以这块呢，就是整个我们的新增功能的一个实现啊，那同时呢。啊，我先把这四条记录先删一删吧，好。