表单

    表格

        表格项

            表单项

            表单项

        表格项

    表格

表单

<!-- 注意此处的model,需要一个对象,而我们的数据是一个列表,我们列表封装成一个对象放在这里就ok了 这里不需要指定rules-->

<el-form :model="{'sysDictDataList':sysDictDataList}"  ref="sysDictDataListRules">

        <el-table

          :data="sysDictDataList"

          style="width: 100%">

          <el-table-column

            label="字典类型">

            <template slot-scope="scope">

              <el-form-item>

                <el-input v-model="scope.row.dictType" :disabled="true"/>

              </el-form-item>

            </template>

          </el-table-column>

          <el-table-column

            prop="dictType"

            label="数据标签">

            <template slot-scope="scope">

                            <!-- 注意此处的prop,需要使用此类型,不能直接填字段名  rules指向该字段的验证规则 -->

              <el-form-item :prop="'sysDictDataList.'+scope.$index+'.dictLabel'" :rules="sysDictDataListRules.dictLabel">

                <el-input v-model="scope.row.dictLabel" placeholder="请输入数据标签"/>

              </el-form-item>

            </template>

          </el-table-column>

          <el-table-column

            prop="dictType"

            label="数据键值">

            <template slot-scope="scope">

              <el-form-item :prop="'sysDictDataList.'+scope.$index+'.dictValue'" :rules="sysDictDataListRules.dictValue">

                <el-input v-model="scope.row.dictValue" placeholder="请输入数据键值"/>

              </el-form-item>

            </template>

          </el-table-column>

          <el-table-column

            prop="dictType"

            label="显示排序">

            <template slot-scope="scope">

              <el-form-item :prop="'sysDictDataList.'+scope.$index+'.dictSort'" :rules="sysDictDataListRules.dictSort">

                <el-input-number v-model="scope.row.dictSort" controls-position="right" :min="0"/>

              </el-form-item>

            </template>

          </el-table-column>

          <el-table-column

            label="备注">

            <template slot-scope="scope">

              <el-form-item :prop="'sysDictDataList.'+scope.$index+'.remark'" :rules="sysDictDataListRules.remark">

                <el-input v-model="scope.row.remark" placeholder="请输入内容"/>

              </el-form-item>

            </template>

          </el-table-column>

          <el-table-column

            label="状态">

            <template slot-scope="scope">

              <el-form-item>

                <el-radio-group v-model="scope.row.status">

                  <el-radio

                    v-for="dict in statusOptions"

                    :key="dict.dictValue"

                    :label="dict.dictValue"

                  >{{dict.dictLabel}}

                  </el-radio>

                </el-radio-group>

              </el-form-item>

            </template>

          </el-table-column>

          <el-table-column

            label="操作">

            <template slot-scope="scope">

              <el-form-item>

                <el-button @click="deleteDetails(scope.$index,sysDictDataList)">删除</el-button>

              </el-form-item>

            </template>

          </el-table-column>

        </el-table>

      </el-form>

            sysDictDataList: [],   // 字典详细列表

            sysDictDataListRules: { // 字典详细列表的验证

          dictLabel: [

            {required: true, message: "数据标签不能为空", trigger: "blur"}

          ],

          dictValue:[

            {required: true, message: "数据键值不能为空", trigger: "blur"}

          ],dictSort:[

            {required: true, message: "排序不能为空", trigger: "blur"}

          ],remark:[

            {required: true, message: "备注内容不能为空", trigger: "blur"}

          ]

        }

             this.$refs['sysDictDataListRules'].validate(valid =>{

                if (valid){

                  console.log('验证成功,提交');

                }

              });