vue表单里面嵌套表格，并对表格里面的内容进行表单验证

最新推荐文章于 2023-08-13 15:30:56 发布

圆凳

最新推荐文章于 2023-08-13 15:30:56 发布

阅读量2k

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_53981442/article/details/127110635

版权

这篇博客展示了如何使用Vue.js创建一个表格组件，该组件包含多个表单字段，如客户等级、等级值、生效时间和价格，并且实现了表单验证功能。在输入时和输入后对数据进行验证，确保数据的完整性和正确性。同时，博客还涵盖了动态渲染表格数据以及日期选择器的使用。

摘要由CSDN通过智能技术生成

      <el-form ref="ruleForm" :model="formPriceAllocation" class="priceBox">
        <el-table
          :data="formPriceAllocation.cardPriceAllocation"
          :show-header="false"
          border
          style="width: 100%"
          size="mini"
        >
          <el-table-column>
            <template slot-scope="scope">
              <div class="table-main">
                <el-form-item
                  //prop 绑定对应的表单里面的值  +scope.$index+  可理解为对应的下标
 'cardPriceAllocation.' + scope.$index + '.customerLevel' 可理解为 cardPriceAllocation[scope.$index].customerLevel
                  :prop="
                    'cardPriceAllocation.' + scope.$index + '.customerLevel'
                  "
                  :rules="rules.customerLevel"
                >
                  <el-input
                    v-model.trim="scope.row.customerLevel"
                    size="mini"
                    @blur="isCustomerLevelRepeat(scope.row.customerLevel)"
                  />
                </el-form-item>
              </div>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <div class="table-main">
                <el-form-item
                  :prop="'cardPriceAllocation.' + scope.$index + '.gradeValue'"
                  :rules="rules.gradeValue"
                >
                  <el-input
                    v-model.trim="scope.row.gradeValue"
                    size="mini"
                    @blur="isGradeValueRepeat(scope.row.gradeValue)"
                  />
                </el-form-item>
              </div>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <div
                v-for="(item, index) in scope.row.allList"
                :key="index"
                class="table-main"
              >
                <el-form-item
                  :prop="
                    'cardPriceAllocation.' +
                      scope.$index +
                      '.allList.' +
                      index +
                      '.allocationListStartTime'
                  "
                  :rules="rules.allocationListStartTime"
                >
                  <el-date-picker
                    ref="start"
                    v-model="item.allocationListStartTime"
                    :placeholder="$t('userInfo.enter') + $t('table.startTime')"
                    type="datetime"
                    size="mini"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                    style="width: 100%"
                    @change="
                      allocationListTimeChange(scope.$index, index, 'start')
                    "
                  />
                </el-form-item>
              </div>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <div
                v-for="(item, index) in scope.row.allList"
                :key="index"
                class="table-main"
              >
                <el-form-item
                  :prop="
                    'cardPriceAllocation.' +
                      scope.$index +
                      '.allList.' +
                      index +
                      '.allocationListEndTime'
                  "
                  :rules="rules.allocationListEndTime"
                >
                  <el-date-picker
                    ref="start"
                    v-model="item.allocationListEndTime"
                    placeholder="不选默认为永久"
                    type="datetime"
                    size="mini"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                    style="width: 100%"
                    @change="
                      allocationListTimeChange(scope.$index, index, 'end')
                    "
                  />
                </el-form-item>
              </div>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <div
                v-for="(item, index) in scope.row.allList"
                :key="index"
                class="table-main"
              >
                <el-form-item
                  :prop="
                    'cardPriceAllocation.' +
                      scope.$index +
                      '.allList.' +
                      index +
                      '.allocationListPrice'
                  "
                  :rules="rules.allocationListPrice"
                >
                  <el-input
                    v-model.trim="item.allocationListPrice"
                    size="mini"
                  />
                </el-form-item>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-form>


data(){

    return{
// 表单绑定的对应的数据
formPriceAllocation: {

        cardPriceAllocation: [
          {
            customerLevel: '', // 客户等级
            gradeValue: '', // 等级值
            allList: [
              {
                allocationListStartTime: '', // 生效开始时间
                allocationListEndTime: '', // 生效结束时间
                allocationListPrice: '' // 价格
              }
            ]
          }
        ]

      },
    // 表单绑定的规则校验 
      rules: {
        customerLevel: [
          {
            required: true,
            validator: priseCustomerLevelRules,
            trigger: ['blur']
          }
        ],
        gradeValue: [
          {
            required: true,
            validator: priseGradeValueRules,
            trigger: ['blur']
          }
        ],
        allocationListStartTime: [
          { required: true, validator: priseStartTimeRules, trigger: ['blur', 'change'] }
        ],
        allocationListEndTime: [
          { required: true, validator: priseEndTimeRules, trigger: ['blur'] }
        ],
        allocationListPrice: [
          { required: true, validator: priseRules, trigger: 'blur' }
        ]
      },

    }

   }