zoukankan      html  css  js  c++  java
  • vue element-ui的el-table和el-form嵌套使用表单校验


    表格是el-table自动获取的后台数据,每行都有el-input的验证,这样一个rules的规则就不能匹配到每一行,所以要是用动态的prop和rules规则
    关键一
    此处 data中定义的变量,params:表格数据,后台查询获得;paramsRules:校验规则
    关键二
    此处 :model、:rules
    关键三
    此处 :prop="'params.' + scope.$index + '.min'"和:rules="paramsForm.paramsRules.min"即动态对应上每行数据的校验规则
    <template>
      <div>
        <el-form :model="paramsForm" ref="rForm" :rules="paramsForm.paramsRules">
          <el-table
            :data="paramsForm.params"
            style=" 100%"
            border
            stripe
            max-height="990"
            highlight-current-row
          >
            <el-table-column
              fixed
              width="55"
              align="center"
                label="序号"
              show-overflow-tooltip
              type="index"
              :index="indexMethod"
            >
            </el-table-column>
            <el-table-column align="center" type="selection" width="55">
            </el-table-column>
    
            <el-table-column
              label="检测类型"
              align="center"
              width="160"
              prop="kpiName"
              sortable
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ scope.row.kpiName }}</span>
              </template>
            </el-table-column>
    
            <el-table-column label="检测开关" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.kpiStatus"
                  :disabled="isDisabled"
                  active-text="关闭"
                  inactive-text="开启"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="报警阈值" align="center">
              <template slot-scope="scope">
                <el-row>
                  <el-col :span="10" style="height: 23px">
                    <el-form-item
                      v-if="scope.row.kpiType === 'range'"
                      :prop="'params.' + scope.$index + '.min'"
                      :rules="paramsForm.paramsRules.min"
                    >
                      <el-input
                        v-model.number="scope.row.min"
                        size="small"
                        :disabled="isDisabled"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="1">-</el-col>
                  <el-col :span="10">
                    <el-form-item
                      v-if="scope.row.kpiType === 'range'"
                      :prop="'params.' + scope.$index + '.max'"
                      :rules="paramsForm.paramsRules.max"
                    >
                      <el-input
                        v-model.number="scope.row.max"
                        size="small"
                        :disabled="isDisabled"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <el-form-item size="large" align="center" style="padding-top: 30px">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isDisabled: false,
          paramsForm: {
            params: [
              {
                kpiName: "视频丢失",
                id: "",
                kpiStatus: false,
                kpiType: "other",
                min: "",
                max: "",
              },
              {
                kpiName: "画面抖动",
                id: "",
                kpiStatus: false,
                kpiType: "other",
                min: "",
                max: "",
              },
              {
                kpiName: "画面冻结",
                id: "",
                kpiStatus: false,
                kpiType: "other",
                min: "",
                max: "",
              },
              {
                kpiName: "镜头遮挡",
                id: "",
                kpiStatus: false,
                kpiType: "other",
                min: "",
                max: "",
              },
              {
                kpiName: "图像过亮",
                id: "",
                kpiStatus: false,
                kpiType: "range",
                min: 60,
                max: 120,
              },
              {
                kpiName: "图像过暗",
                id: "",
                kpiStatus: false,
                kpiType: "range",
                min: 10,
                max: 60,
              },
            ],
            paramsRules: {
              min: [
                {
                  type: "number",
                  required: false,
                  min: 1,
                  max: 120,
                  message: "数值范围(1-120)",
                  trigger: "blur",
                },
              ],
              max: [
                {
                  type: "number",
                  required: false,
                  min: 1,
                  max: 120,
                  message: "数值范围(1-120)",
                  trigger: "blur",
                },
              ],
            },
          },
        };
      },
      methods: {
        indexMethod(index) {
          return index + 1;
        },
        submitForm() {
          this.$refs["rForm"].validate((valid) => {
            if (!valid) return;
            // TODO 提交表单
            console.log("success");
          });
        },
        resetForm() {
          this.$refs["rForm"].resetFields();
        },
      },
    };
    </script>
    
    <style lang="scss" scoped>
    </style>
  • 相关阅读:
    Workbox使用策略
    前端性能指标计算方法
    make源文件时出现 /usr/bin/ld: cannot find -lstdc++ 错误
    mac 支持rz sz
    v8引擎的优化
    pixi与lottie-web的benchmark测试
    alinode与官方node性能测试方法及分析
    2019年RTC大会记录
    后端数据推送-EventSource
    技术选型需要关注的软件开源协议
  • 原文地址:https://www.cnblogs.com/7c89/p/14286338.html
Copyright © 2011-2022 走看看