element-ui 表格添加校验

  html片段

     <el-form
        ref="tableFrom"
        class="tableForm"
        :model="tableFrom"
        :rules="tableFromRules"
      >
        <el-table
          :data="tableFrom.tableData"
          style="width: 100%"
          height="400px"
        >
          <el-table-column label="SAP物料编码" min-width="120">
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.sapMaterialsNo'"
                :rules="tableFromRules.sapMaterialsNo"
              >
                <el-input
                  v-model="scope.row.sapMaterialsNo"
                  placeholder="请输入"
                ></el-input>
                <span class="item-error" slot="error" slot-scope="scope">{{
                  scope.error
                }}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="类别">
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.materialsType'"
                :rules="tableFromRules.materialsType"
              >
                <el-input
                  v-model="scope.row.materialsType"
                  placeholder="请输入"
                ></el-input>
                <span class="item-error" slot="error" slot-scope="scope">{{
                  scope.error
                }}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="物料名称">
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.materialsName'"
                :rules="tableFromRules.materialsName"
              >
                <el-input
                  v-model="scope.row.materialsName"
                  placeholder="请输入"
                ></el-input>
                <span class="item-error" slot="error" slot-scope="scope">{{
                  scope.error
                }}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="物料描述">
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.materialsMemo'"
                :rules="tableFromRules.materialsMemo"
              >
                <el-input
                  v-model="scope.row.materialsMemo"
                  placeholder="请输入"
                ></el-input>
                <span class="item-error" slot="error" slot-scope="scope">{{
                  scope.error
                }}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="产品系列">
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.series'"
                :rules="tableFromRules.series"
              >
                <el-input
                  v-model="scope.row.series"
                  placeholder="请输入"
                ></el-input>
                <span class="item-error" slot="error" slot-scope="scope">{{
                  scope.error
                }}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="机座号">
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.frameNumber'"
                :rules="tableFromRules.frameNumber"
              >
                <el-input
                  v-model="scope.row.frameNumber"
                  placeholder="请输入"
                ></el-input>
                <span class="item-error" slot="error" slot-scope="scope">{{
                  scope.error
                }}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="功率">
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.power'"
                :rules="tableFromRules.power"
              >
                <el-input
                  v-model="scope.row.power"
                  placeholder="请输入"
                ></el-input>
                <span class="item-error" slot="error" slot-scope="scope">{{
                  scope.error
                }}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="级数">
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.level'"
                :rules="tableFromRules.level"
              >
                <el-input
                  v-model="scope.row.level"
                  placeholder="请输入"
                ></el-input>
                <span class="item-error" slot="error" slot-scope="scope">{{
                  scope.error
                }}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="80">
            <template slot-scope="scope">
              <el-button type="text" @click="del(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          icon="el-icon-plus"
          plain
          style="margin-top: 10px; width: 100%"
          @click="add()"
          >添加
        </el-button>
      </el-form>

    js片段

 tableFrom: {
        tableData: [],
      },
      tableFromRules: {
        sapMaterialsNo: [
          {
            required: true,
            message: "SAP物料编码不能为空",
            trigger: ["blur", "change"],
          },
        ],
        materialsType: [
          {
            required: true,
            message: "类别不能为空",
            trigger: ["blur", "change"],
          },
        ],
        materialsName: [
          {
            required: true,
            message: "物料名称不能为空",
            trigger: ["blur", "change"],
          },
        ],
        materialsMemo: [
          {
            required: true,
            message: "物料描述不能为空",
            trigger: ["blur", "change"],
          },
        ],
        series: [
          {
            required: true,
            message: "产品系列不能为空",
            trigger: ["blur", "change"],
          },
        ],
        frameNumber: [
          {
            required: true,
            message: "机座号不能为空",
            trigger: ["blur", "change"],
          },
        ],
        power: [
          {
            required: true,
            message: "功率不能为空",
            trigger: ["blur", "change"],
          },
        ],
        level: [
          {
            required: true,
            message: "级数不能为空",
            trigger: ["blur", "change"],
          },
        ],
        mainUnit: [
          {
            required: true,
            message: "维护单位不能为空",
            trigger: ["blur", "change"],
          },
        ],
      },

css片段文章来源地址https://www.toymoban.com/news/detail-555222.html

::v-deep .tableForm {
  .el-form-item {
    margin-bottom: 0;
  }
.el-form-item--medium .el-form-item__content{
  line-height: 20px;
}
  .item-error {
    color: #ff4949;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
  }
}

到了这里，关于element-ui 表格添加校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！