vue elementui二维数组表格验证

html

<el-form ref="information" :model="information" :rules="rules">
        <el-table
          :data="information.slicingProcessList"
        >


          <el-table-column
            width="200"
            label="生产数量"
            :render-header="addRedStar"
          >
            <template slot-scope="scope">
              <el-form-item
                :prop="'slicingProcessList.' + scope.$index + '.calQuantity'"
                :rules="rules.calQuantity"
              >
                <el-input
                  v-model="
                    information.slicingProcessList[scope.$index].calQuantity
                  "
                  @input="
                    information.slicingProcessList[scope.$index].calQuantity =
                      information.slicingProcessList[
                        scope.$index
                      ].calQuantity.replace(/[^0-9]/g, '')
                  "
                  placeholder="请输入生产数量"
                  maxlength="10"
                  :min="1"
                />
              </el-form-item>
            </template>
          </el-table-column>

js

      rules: {
        calQuantity: [
          {
            validator: validatorPositiveInteger,
          },
        ],
      },


    addRedStar(h, { column }) {
      // 给表头加必选标识
      return [
        h("span", { style: "color: red" }, "*"),
        h("span", " " + column.label),
      ];
    },

 

posted @ 2022-05-28 11:29  jqynr  阅读(569)  评论(0)    收藏  举报