vue动态渲染表单

            <!-- 子分类信息展示 -->
            <a-form v-else-if="openType == '2' " ref="createNode" :model="formNode.formValue"
                    :rules="formNode.rules" v-bind="layout" >
              <a-form-item v-for="(item, index) in formNode.formItem" :key="index" :label="item.label" :name="item.name">
                <!-- 子分类下拉框 -->
                <a-select v-model:value="formNode.formValue[item.name]" v-if="item.options">
                  <a-select-option v-for="(it, i) in item.options" :value="it.val" :key="i">
                    {{ it.label }}
                  </a-select-option>
                </a-select>
                <!-- 子分类单选 -->
                <a-radio-group v-model:value="formNode.formValue[item.name]" v-else-if="item.radioOptions">
                  <a-radio v-for="(it, i) in item.radioOptions" :value="it.val" :key="i">
                    {{ it.label }}
                  </a-radio>
                </a-radio-group>
                <!-- 子类输入框 -->
                <a-input v-else v-model:value="formNode.formValue[item.name]"
                        :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
                        :readOnly="item.readOnly" :disabled="item.disabled" />
              </a-form-item>
            </a-form>
    // 弹窗中的添加/编辑分类表单数据
    const formNode: formFormatter = reactive({
        formItem: [
          {
            name: "baseSalary",
            label: "基本薪酬",
            // disabled:true
          },
          {
            name: "jobs",
            label: "岗位",
            // disabled:true
          },
          {
            name: "gradeName",
            label: "岗位等级",
           
            
          }
          
        ],
        formValue: {
          type: "1"
        },
        rules: {
          name: [{
            required: true,
            message: "必填项",
            trigger: "blur"
          }],
          phone: [{
            required: true,
            message: "必填项",
            trigger: "blur"
          }],
          description: [{
            required: true,
            message: "必填项",
            trigger: "blur"
          }],
        }
      }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值