[JavaScript知识库]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"
          }],
        }
      }