el-table内表单校验

最新推荐文章于 2024-08-01 18:07:49 发布

夕雾不闻钟

最新推荐文章于 2024-08-01 18:07:49 发布

阅读量3.8k

点赞数 1

分类专栏：趟过的坑文章标签： elementui 前端

本文链接：https://blog.csdn.net/qq_36712606/article/details/115478388

版权

趟过的坑专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文介绍了如何在Element UI的el-table组件中，利用el-form进行单元格级别的校验，并实现数据的批量提交。通过实例展示了如何使用v-model和rules属性来确保设计师等级选择的有效性，以及formref的使用来触发验证流程。

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

在el-table中进行每个单元格的校验,并且批量提交,使用el-form嵌套el-table的方法

代码如下,注意el-form中要设置 ref,model,

<el-form ref="addForm" :model="formdata" :rules="formdataRules">
      <el-table
        :data="formdata.employeeData"
        style="width: 80%; margin: 0 auto"
      >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="EmployeeName" label="设计师名称" width="200">
        </el-table-column>
        <el-table-column prop="SuplierName" label="供方名称"> </el-table-column>
        <el-table-column prop="LevelName" label="设计师等级" width="200">
          <template slot-scope="scope">
            <el-form-item
              style="margin-bottom: 0px"
              :prop="'employeeData.' + scope.$index + '.LevelName'"
              :rules="[
                {
                  required: true,
                  message: '设计师等级不能为空',
                  trigger: 'change',
                },
              ]"
            >
              <el-select
                style="width: 100%"
                v-model="scope.row.LevelId"
                placeholder="请选择"
                @change="getLevelName($event, scope.row)"
              >
                <el-option
                  v-for="item in levelNameList"
                  :key="item.LevelId"
                  :label="item.LevelName"
                  :value="item.LevelId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

data() {
    return {
      visible: false,
      typeName: "已评级",
      type: 1,
      keyword: "",
      formdata: {
        employeeData: [],
      },
      levelNameList: [],
      formdataRules: {},
    };
  },

this.$refs["addForm"].validate((valid) => {
  if (valid) {
        //submit接口
            
  } else {
    this.$message.error("填写有误，请修改!");
    return false;
  }
});