el-input的form表单动态输入校验

发布时间 2023-11-24 14:43:57作者: 龙旋风
  <el-form :inline="true" class="form_inline" label-width="120px" :label-position="labelPosition">
          <div class="el-form-item asterisk-left" v-for="(field, index) in person.kpiList" :key="index">
            <label class="el-form-item__label">{{ field.kpiName }}
              <el-tooltip placement="top" v-if="field.paramsConfigTips ? true : false">
                <template #content> {{ field.paramsConfigTips }}</template>
                <QuestionFilled style="font-size: 14px; width: 16px"></QuestionFilled>
              </el-tooltip>
            </label>

            <div class="el-form-item__content">
              <el-input clearable class="input_top" v-model.trim="field.kpiValue" :placeholder="field.kpiValue"
                :disabled="field.disabled" @input="handleInput(index)">
                {{ field.kpiValue }}
                <template #append>
                  <span>{{ field.kpiUnit }}</span>
                </template>
              </el-input>
            </div>
          </div>
        </el-form>

  

const person = reactive({
  kpiList: []
});



function handleInput(index) {
  const item = person.kpiList[index];
  item.kpiValue = item.kpiValue.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1'); 
  setTimeout(() => {
    item.kpiValue =item.kpiValue; 
  }, 0);
}