Talk is cheap

Vue动态表单

项目场景如下: 假设一个电脑城里卖组装电脑,电脑的主板可以有很多种选择,显示器也有多种选择,CPU/显卡/硬盘都有多种牌子可供选择。
再假设这个电脑城还卖组装车: 发动机/轮胎/内饰/附件等都是可以选择的。。。
客户在选择购买不同的商品时,该商品下的所有可选项都可以加载出来让客户选。客户勾选完商品配置后可以保存到数据库。 改天客户还能够对已经选择的商品进行编辑

  1. 要实现能够动态的加载不同商品的可选项和可选值,生成表单。
  2. 要能够实现编辑功能:在编辑商品时,动态加载表单,并且自动设置可选项的值为之前选择的值。

这里的难点主要在于:所有的商品的可选项都是不定的,而Vue是数据双向绑定的,要想给可选项设置选中值,就要用v-model 来绑定 表单项的value。 但是在这种模式下,就要建立相对应的变量,而选项又是不定的,那么对应的变量个数也是不定的。。。。

网上可以查到的动态表单的模式大都是: 绑定的变量值是确定的,然后通过加后缀来拼接。。无法满足这样的业务场景。

我这里使用解决方案如下:

  1. 先动态生成表单: 这里是吧表单项做成了一个vue组件:

    *必选-
    多选-
    {{option.optionname}}


    其中options 是传过来的所有选择项,选择项中又有选择值,这里用了两个循环来展现页面。

  2. 收集用户选择的值, 既然这里没有用数据绑定,那么该如何收集用户的选择值呢?注意上面的
    @on-change="selectOption(option,$event)"
    这里监听select的选择事件,当用户改了选择值时,通过
    EventBus.$emit('watchdesc', option); 来通知父组件把用户选择的值记录下来。

  3. 重点: 如何实现表单设置默认值? 注意看这里 :value="setDefault(option)" 这里给value绑定的不是一个变量, 而是一个函数, 这个函数接受用户选择的所有值,然后经过过滤后返回。 就能够完美的实习 动态表单了。。

注意: 这里使用的是iview 组建,如果你使用其他的 vue组件库,具体实现有略微差别。但是实现的思路都是一样。 如果还搞不定,可以加群咨询 QQ群: 587660995

未经允许不得转载:CheapTalk » Vue动态表单
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!