場景:前端開發(fā)中,經(jīng)常會遇到比較多的表單填寫頁面,其中有el-form,el-table,表格的每一列中又嵌套著輸入框或者下拉框,然后每個還需要做單獨的校驗

效果:

? 點擊保存可校驗el-input和el-select是否有值，不符合校驗規(guī)則就標紅提醒

?

1.el-form嵌套el-table

• 1.el-form里面嵌套el-table

  <el-form :model="formData" :rules="formData.rules" ref="formRef">
      <el-table
         :data="formData.tableData"
         style="width: 100%">
         <el-table-column
           prop="id"
           label="單號"
           width="100">
         </el-table-column>
       </el-table>
  </el-form>
  

• 2.在el-table-column自定義內(nèi)容里面，嵌套el-form-item，里面再放el-input或者el-select結(jié)構(gòu)

   <el-table-column
     prop="name"
      label="商品名"
      width="180">
      <template slot-scope="scope">
          <el-form-item>
            <el-input v-model="scope.row.name"></el-input>
          </el-form-item>
      </template>
    </el-table-column>
  

• 3.數(shù)據(jù)的結(jié)構(gòu)
  因為el-form是最外層的，所以formData是個對象，對象里放el-table用到的數(shù)組和rules
  這樣定義是為了校驗時用到rules

?

 formData: {
    rules: {
        name: {
          required: true,
          message: '請輸入商品名',
          tirgger: ['blur', 'change']
        },
        selected: {
          required: true,
          message: '請選擇',
          tirgger: 'change'
        }
      },
      tableData: [
        {id: '001'},
        {id: '002'},
        {id: '003'},
      ]
    },

2.定義規(guī)則

1.el-form綁定: rules使用formData.rules整個對象，同時定義一個ref

<el-form :model="formData" :rules="formData.rules" ref="formRef">

2.保證prop必須唯一
自定義prop：使用 列表數(shù)據(jù)屬性名+列的下標scope.$index+列的數(shù)據(jù)屬性名

 <el-table-column
   prop="name"
    label="商品名"
    width="180">
    <template slot-scope="scope">
        <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="formData.rules.name">
          <el-input v-model="scope.row.name"></el-input>
        </el-form-item>
    </template>
  </el-table-column>

注意：如果不是使用列表數(shù)據(jù)屬性名tableData，會出現(xiàn)報錯
Error: please transfer a valid prop path to form item

?3.保證每一個el-form-item都要配置rules屬性
rules使用formData.rules對應(yīng)的屬性的規(guī)則文章來源地址http://www.zghlxwxcb.cn/news/detail-784736.html

3.完整代碼

<template>
  <div>
    <el-form :model="formData" :rules="formData.rules" ref="formRef">
      <el-table
        :data="formData.tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="單號"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名"
          width="180">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="formData.rules.name">
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="class"
          label="分類">
          <template slot-scope="scope">
           <el-form-item :prop="'tableData.' +scope.$index + '.class'" :rules="formData.rules.selected">
             <el-select v-model="scope.row.class">
                <el-option
                  v-for="item in classOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
           </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-button @click="submitForm('formRef')">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        rules: {
          name: {
            required: true,
            message: '請輸入商品名',
            tirgger: ['blur', 'change']
          },
          selected: {
            required: true,
            message: '請選擇',
            tirgger: 'change'
          }
        },
        tableData: [
          {id: '001'},
          {id: '002'},
          {id: '003'},
        ]
      },
      classOption: [
        {
          value: 0,
          label: '分類1'
        },
        {
          value: 0,
          label: '分類1'
        }
      ]
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

到了這里，關(guān)于element-ui的el-form表單和el-table校驗嵌套使用校驗el-input和el-select的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！