vue表格表单输入框校验

ghx123456ghx

已于 2024-03-21 15:57:32 修改

阅读量830

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2023-04-13 16:15:34 首次发布

本文链接：https://blog.youkuaiyun.com/ghx123456ghx/article/details/130133243

文章展示了在Vue.js应用中使用el-form-item和el-table组件进行表单验证和表格数据编辑的方法。内容包括动态设置验证规则、输入框Blur事件处理、金额格式化以及表格内编辑时的数据绑定和校验。同时，还涉及了表格的总计计算和单元格的自定义渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单

<el-form-item
                  label="实际任职结束时间"
                  prop="actWorkEndDate"
                  :rules="form.status === '2' ? rules.actWorkEndDate : [{required: false}]"
                  v-if="workDept !== '3'"
                >
                
 </el-form-item>

            <el-table-column label="议案名称" min-width="240" align="center" :render-header=" (h,obj) => montionRd(h,obj)">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0px"
                  style="margin-bottom: 0"
                  :prop="'montions.' + scope.$index + '.motionName'"
                  :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                  <el-input v-model="form.montions[scope.$index].motionName"  @blur="checkBlur($event)"  placeholder="请输入信息"></el-input>

                </el-form-item>
              </template>
            </el-table-column>

或者场景二

      <el-table
            :header-cell-style="{textAlign: 'center'}"
            show-summary
            :summary-method="resolutionDetailsSummaries"
            stripe
            :data="form.tableData"
            ref="table"
            tooltip-effect="dark"
            border
            style="width:98%">
            <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
            <el-table-column label="股东名称" width="300">
              <template slot-scope="scope">
                <div :v-model="scope.row.stockholderName" >{{scope.row.stockholderName}}</div>
                <div :v-model="scope.row.stockholderId" v-show="false" ></div>
              </template>
            </el-table-column>
            <el-table-column :label="'实缴股权比例(%)'" align="right" prop="actualRatio"/>
            <el-table-column label="本次应付分红金额(万元)" align="center">
              <el-table-column prop="bonusAmount" align="right"  label="现金">
                <template slot-scope="scope">

                  <el-form-item
                    label-width="0px"
                    style="margin-bottom: 0;"
                    :prop="'tableData.' + scope.$index + '.bonusAmount'"
                    :rules="{validator: validateMoney,required: true, message: '请输入正确的金额，小数点保留六位', trigger: 'blur'}">
                    <el-input size="mini" v-model="form.tableData[scope.$index].bonusAmount"  @change="resolutionDetailsChange(scope.row)" oninput="value=value.replace(/[^\d^\\.]+/g, '').replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3') " :disabled="resolutionDetailsDisable('1')"></el-input>
                  </el-form-item>

                  <!-- <el-input
                     oninput="value=value.replace(/[^\d^\,\.]+/g, '').replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3') "
                     @change="resolutionDetailsChange(scope.row)"
                     size="mini"
                     v-model="scope.row.bonusAmount"
                     :disabled="resolutionDetailsDisable('1')"></el-input>-->
                </template>
              </el-table-column>
              <el-table-column prop="shareAmount" align="right"   label="股权">
                <template slot-scope="scope">
                  <el-form-item
                    label-width="0px"
                    style="margin-bottom: 0;"
                    :prop="'tableData.' + scope.$index + '.shareAmount'"
                    :rules="{validator: validateMoney,required: true, message: '请输入正确的金额，小数点保留六位', trigger: 'blur'}">
                    <el-input size="mini" v-model="form.tableData[scope.$index].shareAmount"  @change="resolutionDetailsChange(scope.row)" oninput="value=value.replace(/[^\d^\\.]+/g, '').replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3') " :disabled="resolutionDetailsDisable('2')"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="otherAmount" align="right"  label="其他">
                <template slot-scope="scope">

                  <el-form-item
                    label-width="0px"
                    style="margin-bottom: 0;"
                    :prop="'tableData.' + scope.$index + '.otherAmount'"
                    :rules="{validator: validateMoney,required: true, message: '请输入正确的金额，小数点保留六位', trigger: 'blur'}">
                    <el-input size="mini" v-model="form.tableData[scope.$index].otherAmount"  @change="resolutionDetailsChange(scope.row)" oninput="value=value.replace(/[^\d^\\.]+/g, '').replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3') " :disabled="resolutionDetailsDisable('3')"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column prop="totalAmount" align="right"  label="合计">
              <template slot-scope="scope">
                <el-input
                  oninput="value=value.replace(/[^\d^\\.]+/g, '').replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3') "
                  v-model="scope.row.totalAmount"
                  size="mini"
                  :disabled="true"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="财务凭证号">
              <template slot-scope="scope" >
                <el-form-item
                  style="margin-left: 10px;margin-bottom:3px"
                  label=""
                  label-width="0px"
                  :prop="
                      'cmBmActionDetailsList.' + scope.$index + '.finacialNo'
                    "
                  :rules="[
                      {
                        required: true,
                        message: '财务凭证号不得为空',
                        trigger: 'change'
                      }
                    ]"
                >
                  <el-input :disabled="readonly" size="mini" v-model="scope.row.finacialNo"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="备注">
              <template slot-scope="scope">
                <el-input :disabled="readonly" size="mini" v-model="scope.row.remark"></el-input>
              </template>
            </el-table-column>
          </el-table>

js方法部分

      validateMoney: (rule, value, callback) => {
        if (value === null || value === undefined || value === '') { // 对于disable的处理
          callback()
        } else {
          const reg = /^[0-9]+(.[0-9]{1,6})?$/
          value = value + ''
          const validateValue = value.replace(',', '').replace('，', '').replace(',', '')
          if (!reg.test(validateValue)) {
            this.$message({
              message: '请输入正确的六位小数金额',
              type: 'warning'
            })
            callback(new Error('请输入正确的六位小数金额！'))
          }
          callback()
        }
      },
    // 控制是否可编辑
    resolutionDetailsDisable(type) {
      if (this.readonly) {
        return true
      }
      if (!this.form.curryAmount) {
        return true
      }
      const payWay = this.form.actPayWay
      if (payWay && payWay.length > 0) {
        if (payWay.indexOf(type) !== -1) {
          return false
        }
      }
      return true
    },