关于vue快速构建form表单

Question

快速构建form表单必要性
我现在做了一个form表单生成的功能
1.控件组件: input select file。。。
2.表单组件: 显示基础信息，循环出对应控件，错误信息显示
尤其是后台基础功能都差不多的情况下，使用options参数快速生成需要的表单
现在要实现控件联动的功能，谁有实现过？或者说有什么好的方式？

这个是我自己的实现联动的方式：
https://segmentfault.com/a/11...

Answer 1

使用的elementui, 循环和验证是已经完成了，控件联动的话处理方式还没有想到很好的

数据结构

      formInfo: {
        ref: null,
        data: {
          id: '', // *唯一ID
          account: '', // *用户账号
          password: '', // *用户密码
          name: '', // *用户昵称
          type: 2, // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加
          sex: 0, // *性别: 0:男 1:女
          avatar: '', // 头像
          phone: '', // 手机号码
          wechat: '', // 微信
          qq: '', // qq
          email: '', // 邮箱
          status: 1 // *状态: 0：停用，1：启用(默认为1)',
          // create_user: '', // 创建人
          // create_time: '', // 创建时间
          // update_user: '', // 修改人
          // update_time: '' // 修改时间
        },
        fieldList: [
          {label: '账号', value: 'account', type: 'input', required: true},
          {label: '密码', value: 'password', type: 'password', required: true},
          {label: '昵称', value: 'name', type: 'input', required: true},
          {label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true},
          {label: '头像', value: 'avatar', type: 'input'},
          {label: '手机号码', value: 'phone', type: 'input'},
          {label: '微信', value: 'wechat', type: 'input'},
          {label: 'QQ', value: 'qq', type: 'input'},
          {label: '邮箱', value: 'email', type: 'input'},
          {label: '状态', value: 'status', type: 'select', list: 'statusList', required: true}
        ],
        rules: {},
        labelWidth: '120px'
      }

全局验证处理

    // 初始化验证数据
    _initRules (formInfo) {
      const obj = {},
        fieldList = formInfo.fieldList
      // 循环字段列表
      for (let item of fieldList) {
        let type = item.type === 'select' ? '选择' : '输入'
        if (item.required) {
          if (item.rules) {
            obj[item.value] = {
              required: item.required,
              validator: item.rules,
              trigger: 'blur'
            }
          } else {
            obj[item.value] = {
              required: item.required,
              message: '请' + type + item.label,
              trigger: 'blur'
            }
          }
        } else if (item.rules) {
          obj[item.value] = {
            validator: item.rules,
            trigger: 'blur'
          }
        }
      }
      formInfo.rules = obj
    }

你的联动处理方式和我现在用的差不多，也不好用，可以参考饿了么团队写的https://zhuanlan.zhihu.com/p/...