Vue动态表单的应用详解

概述

  后台管理系统里面有非常多的表单需求,我们希望能够通过写一个json格式的数据,通过vue的循环动态地去渲染动态表单。并且能够在外部得到渲染出来的表单数据,从而做一个入库操作。

v-model的理解

  vue-model相当于给表单元素传递一个value,外部监听input事件。所以我们自己封装表单组件的时候也是可以传递一个value值,监听input事件获取输入的值。




业务应用场景

  最近在写一个在线教育平台,发现在后台添加课程的时候,每个课程所需要的参数不一样(有的课程没有特殊参数),使用固定表单在这个场景下使用很不优雅,而且工作量巨大。为了解决这个问题,我们可以在添加课程的时候动态的展示出课程分类表单所需要的参数,获取输入的课程参数,构造数据,进行入库操作。

通过组件展示分类







采用第三方组件监听分类的ID


import Vue from 'vue'

export default new Vue();

课程添加页面






小结

简单的来说,就是我们在添加课程的时候选择分类,会以表单的形式动态展示出该分类下面我们必传的参数,用户添加课程,提高效率。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的