基于antdesign表單動態(tài)配置
頁面效果

表單界面.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: [  //配置數(shù)據(jù)流
        {
          label: '物料編碼',
          value: 'materialNumber',
          type: 'input',
          isShow: true,
          disabled: false
        },
        {
          label: '物料名稱',
          value: 'materialName',
          type: 'input',
          rule: true,
          potionleft: '-48%',
          isShow: false,
          disabled: true
        },
        {
          label: '規(guī)格',
          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: '機動車發(fā)票', value: '03' },
            { label: '二手車發(fā)票', 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: {
 // 下拉框回調(diào)
    changSelect(val) {
      console.log(val)
    },

 // 時間切換回調(diào)
    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>

大家有問題或者建議可以留言探討