基于antdesign表单动态配置
页面效果

表单界面.png

   <a-form
        :layout="formLayout"
        :form="form"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-row :gutter="24">
          <a-col :span="7" v-for="(item, index) in formItem" :key="index" v-show="!item.isShow">
            <a-form-item :label="item.label" v-if="item.type === 'input'" "class="potion">
             <span v-if="item.rule" class="absolute" :style="{ left: item.potionleft ? item.potionleft : '-32%' }"
                >*</span>
              <a-input
                :placeholder="'请输入' + item.label"
                :disabled="item.disabled"
                v-model="form[item.value]"
              />
            </a-form-item>
            <a-form-item :label="item.label" v-if="item.type === 'text'">
              <span>{{ form[item.value] }}</span>
            </a-form-item>
            <a-form-item :label="item.label" v-if="item.type === 'select'" "class="potion">
             <span v-if="item.rule" class="absolute" :style="{ left: item.potionleft ? item.potionleft : '-32%' }"
                >*</span>
              <a-select
                v-model="form[item.value]"
                style="width: 100%"
                :placeholder="'请选择' + item.label"
                @change="item.change"
              >
                <a-select-option v-for="i in menu" :key="i">
                  {{i.label}}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :label="item.label" v-if="item.type === 'dateTime'" "class="potion">
             <span v-if="item.rule" class="absolute" :style="{ left: item.potionleft ? item.potionleft : '-32%' }"
                >*</span>
              <a-date-picker
                v-model="form[item.value]"
                :placeholder="'请选择' + item.label"
                @change="item.change"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

// 配置字段

 data() {
    return {
      formLayout: 'Inline', // 表单布局
      form: { materialSpecifications2: 1.3, materialSpecifications1: '2021-01-11' },
      formItem: [  //配置数据流
        {
          label: '物料编码',
          value: 'materialNumber',
          type: 'input',
          isShow: true,
          disabled: false
        },
        {
          label: '物料名称',
          value: 'materialName',
          type: 'input',
          rule: true,
          potionleft: '-48%',
          isShow: false,
          disabled: true
        },
        {
          label: '规格',
          value: 'materialSpecifications',
          type: 'input',
          isShow: false,
          disabled: false
        },
        {
          label: '税码',
          value: 'materialSpecifications',
          type: 'select',
          rule: true,
          potionleft: '-48%',
          change: this.changSelect,
          isShow: false,
           menu: [
            { label: '专票', value: '01' },
            { label: '机动车发票', value: '03' },
            { label: '二手车发票', value: '15' }
          ]
          disabled: false
        },
        {
          label: '日期',
          value: 'materialSpecifications1',
          type: 'dateTime',
         change: this.changTime,
          isShow: false,
          disabled: false
        },
        {
          label: '税率',
          value: 'materialSpecifications2',
          type: 'text',
          isShow: false,
          disabled: false
        }
      ]
    };
  },

 methods: {
 // 下拉框回调
    changSelect(val) {
      console.log(val)
    },

 // 时间切换回调
    changTime(val) {
      console.log(val)
    },
    // 保存按钮
    handleSubmit() {
           //formDate必填校验
            let message =''
            for(let k in this.formDate) {
               this.formItem.forEach(item => {
                   console.log(item.value, )
                   if(item.value === k && item.rule && !this.formDate[k]) {
                     message = '请输入' + item.label
                   }
               })
              if(message) {
                this.$message.error(message)
                  return
               }
            }
      console.log(this.form);
      this.getData();
    }
}
</script>
<style>
.potion {
  position: relative;
}
.absolute {
  position: absolute;
  z-index: 99;
  left: -36%;
  top: -8px;
  color: #f00;
}
</style>

大家有问题或者建议可以留言探讨