el-form内嵌el-table并实现校验功能

最新推荐文章于 2024-02-17 14:06:25 发布

子非我233

最新推荐文章于 2024-02-17 14:06:25 发布

阅读量493

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_37962105/article/details/118670408

版权

     <el-form
            :rules="RuleformDataSave"
            :model="formDataSave"
            slot="dialog-form"    
            ref="formDataSave"
            label-width="25%"
            size="mini"
          >
            <el-form-item
              label="方案名称"
              prop="scenarioName"
            >
            <el-table
              v-if="formDataSave.IsRelevance==1"
              :data="formDataSave.formDataTable"
              border
              header-align="center"
            >
              <el-table-column
                prop="fiveClass"
                label="五级分类"
                align="center"
              />
              <el-table-column
                label="调研频率"
                align="center"
              >
                <template slot="header">
                  <p class="headerP">
                    <span
                      class="sp"
                      style="color: red; font-size: 12px"
                    >*</span>&nbsp;调研频率
                  </p>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`formDataTable.${scope.$index}.frequencyTable`"
                    class="tabFormItem"
                    :rules="RuleformDataSave.frequencyTable"
                  >
                    <el-select
                      v-model="scope.row.frequencyTable"
                      filterable
                    >
                      <el-option
                        v-for="item in periodList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>

            <el-form-item
              v-if="formDataSave.IsRelevance!=1"
              label="调研频率"
              prop="frequency"
            >
              <el-select
                v-model="formDataSave.frequency"
                style="width:56%"
              >
                <el-option
                  v-for="item in periodList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>

<script>
  data () {
    return {
      formDataSave: {
        formDataTable: [],
        FormPeriodList: [],'
      },
      RuleformDataSave: {
        scenarioName: { required: true, message: '方案名称不能重复', trigger: ['change', 'blur'] },
        IsRelevance: { required: true, message: '请选择', trigger: 'change' },
        frequencyTable: [{ required: true, message: '请选择五级分类', trigger: 'blur' }]
      }
    }
  },

</script>