vue+element table表格校验必填项

最新推荐文章于 2023-12-24 20:46:28 发布

原创最新推荐文章于 2023-12-24 20:46:28 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

这篇博客展示了如何在Vue.js中使用el-form和el-table组件进行表单模型绑定和验证。内容包括通过v-model实现数据双向绑定，以及在表格列中嵌入el-form-item用于阈值字段的验证，触发blur事件时检查阈值是否为空。

<el-form :model="inServForm" ref="inServForm"  :rules="rules" size="small">
    <el-table ref="infiledList" border :data="inServForm.infiledList" style="width: 100%" >
       <el-table-column prop="matnrid"  label="阈值"  width="165px">
       <template scope="scope">
        <el-form-item :prop="'infiledList.'+scope.$index+'.threshold'" :rules="rules.matnrid">
                <el-input  size="mini"  v-model="scope.row.threshold"  ></el-input>
          </el-form-item>
         </template>
    </el-table-column>
</el-table>
</el-form>


    export default {
      data() {
        return {
          inServForm: {
            infiledList:[],
          },
        },
        computed: {
        rules(){
        return {
          threshold: [{
            required: true,
            message: "阈值不能为空",
            trigger: "blur"
          }]
        }
 }
      }
        
      }
    }