elementUI+VUE给表格中的输入选择框添加验证

业务需求，需要在用element写的表格中的输入选择框加验证，如下因为本来表格组件是table写出来的，不像form表单可以直接加prop和rules验证，一番查找之后，是先用form表单把table表格包起来<template><el-card class="box-card"><div slot="header" class="clearfix"><s

哪有人敲代码不戴头盔的

2640人浏览 · 2020-10-27 18:27:03

哪有人敲代码不戴头盔的 · 2020-10-27 18:27:03 发布

业务需求，需要在用element写的表格中的输入选择框加验证，如下

在这里插入图片描述
因为本来表格组件是table写出来的，不像form表单可以直接加prop和rules验证，一番查找之后，是先用form表单把table表格包起来

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>填写参数</span>
    </div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-table :data="ruleForm.tableData" style="width: 100%" border>
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50"
        ></el-table-column>

        <el-table-column label="年份" width="110">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.years'"
              hide-required-asterisk=true
              :rules="rules.years"
            >
              <el-select v-model="scope.row.years" placeholder="请选择">
                <el-option
                  v-for="item in year"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="省" width="110">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.value'"
              :rules="rules.value"
            >
              <el-select v-model="scope.row.value" placeholder="请选择">
                <el-option
                  v-for="item in province"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="市县" width="110">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.citys'"
              :rules="rules.citys"
            >
              <el-select v-model="scope.row.citys" placeholder="请选择">
                <el-option
                  v-for="item in city"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="乡镇" width="110">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.towns'"
              :rules="rules.towns"
            >
              <el-select v-model="scope.row.towns" placeholder="请选择">
                <el-option
                  v-for="item in town"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="小班" width="100">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.xiaoban'"
              :rules="rules.xiaoban"
            >
              <el-input
                v-model="scope.row.xiaoban"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="地类" width="100">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.lands'"
            >
              <el-select v-model="scope.row.lands" placeholder="请选择">
                <el-option
                  v-for="item in land"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="树种" width="110">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.trees'"
              :rules="rules.trees"
            >
              <el-select v-model="scope.row.trees" placeholder="请选择">
                <el-option
                  v-for="item in tree"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="平均林龄（年）" width="100">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.average'"
            >
              <el-input
                v-model="scope.row.average"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="龄组（生产期）">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.production'"
            >
              <el-input
                v-model="scope.row.production"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="活立木蓄积/m³">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.Area'"
              :rules="rules.Area"
            >
              <el-input
                v-model="scope.row.Area"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="发生森林火灾的面积/ha">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.fireArea'"
              :rules="rules.fireArea"
            >
              <el-input
                v-model="scope.row.fireArea"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="核算周期">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.cycle'"
              :rules="rules.cycle"
            >
              <el-input
                v-model="scope.row.cycle"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="核算边界内项目林地总面积/ha">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.totalArea'"
              :rules="rules.totalArea"
            >
              <el-input
                v-model="scope.row.totalArea"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="是否符合碳汇林建设" width="100px">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.chooses'"
              :rules="rules.chooses"
            >
              <el-select v-model="scope.row.chooses" placeholder="请选择">
                <el-option
                  v-for="item in choose"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template scope="scope">
            <el-button
              type="button"
              class="el-button el-button--text el-button--small"
              @click="deleteRow(scope.$index)"
            >
              <span>删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="center">
      <el-button @click="addNew">添加行</el-button>
    </div>
  </el-card>
</template>

<script>
import { saveData } from '@/api/investment'
export default {
  data() {
    return {
      rules: {
        years: [{ required: true, message: '请选择', trigger: 'change' }],
        value: [{ required: true, message: '请选择', trigger: 'change' }],
        citys: [{ required: true, message: '请选择', trigger: 'change' }],
        towns: [{ required: true, message: '请选择', trigger: 'change' }],
        xiaoban: [{ required: true, message: '请输入', trigger: 'blur' }],
        // lands: [{ required: true, message: '请选择', trigger: 'change' }],
        trees: [{ required: true, message: '请选择', trigger: 'change' }],
        // average: [{ required: true, message: '请输入', trigger: 'blur' }],
        // production: [{ required: true, message: '请输入', trigger: 'blur' }],
        Area: [{ required: true, message: '请输入', trigger: 'blur' }],
        fireArea: [{ required: true, message: '请输入', trigger: 'blur' }],
        cycle: [{ required: true, message: '请输入', trigger: 'blur' }],
        totalArea: [{ required: true, message: '请输入', trigger: 'blur' }],
        chooses:[{ required: true, message: '请选择', trigger: 'change' }]
      },
      year: [],
      province: [],
      city: [],
      town: [],
      land: [],
      tree: [],
      choose: [],

      ruleForm: {
        tableData: [
          {
            years: '',
            value: '',
            citys: '',
            towns: '',
            lands: '', //地类
            trees: '',
            chooses: '',
            Area: '',
            cycle: '', //核算周期
            xiaoban: '',
            average: '',
            production: '',
            fireArea: '',
            totalArea: '',
          },
        ],
      },
    }
  },
  methods: {
   
    //添加行
    addNew() {
      this.ruleForm.tableData.push({
        index:this.ruleForm.tableData.length,
        value:''
      })
    },
    //删除行
    deleteRow(index){
      this.ruleForm.tableData.splice(index,1)
    },
  },
}
</script>

最终实现如下
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^