el-table + el-form实现可编辑表格字段验证

表格输入信息很常见,因此表格的验证也很必要,el-form提供了输入框验证.可以和表格结合起来用,使用效果

 

 

HTML:

  添加
  
  :show-message="false">
    table
      :data="productRuleForm.tableData"
      border
      style="width: 100%">
      column
        prop="date"
        label="日期"
        width="180">
        
      
      column
        prop="name"
        label="姓名"
        width="180">
        
      
      column
        prop="phone"
        label="电话">
        
      
      column
        prop="address"
        label="地址">
        
      
    
  
  提交

 

 

js:

data () {
    return {
      productRuleForm: {
        tableData: [{
          date: '',
          name: '',
          phone: '',
          address: ''
        }],
        rules: {
          date: [{ required: true, message: '请选择日期', trigger: 'change' }],
          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
          address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
        }
      }
    }
  },
 methods: {
    // 添加一行
    addTable () {
      this.productRuleForm.tableData.push({
        date: '',
        name: '',
        phone: '',
        address: ''
      })
    },

    // 提交数据
    submit () {
      this.$refs['productRuleForm'].validate((valid) => {
        if (valid) {

        }
      })
    }
 }

 

 

转载于:https://www.cnblogs.com/steamed-twisted-roll/p/10883030.html