el-table 中嵌入 el-input输入框 校验参数

template

• 要点：el-form嵌套一下el-table并且el-form-item嵌套一下el-input 在el-form-item上设置prop和rules。
• table的data数据一定要在form里放才可以！

<el-form ref="sceneForm" :model="sceneForm" :rules="rules">
     <el-table :data="sceneForm.sceneData">
            <el-table-column prop="piiData" label="数值">
                 <template slot-scope="scope" align="center">
                     <el-form-item :prop="'sceneData.'+scope.$index+'.bankNo'" 
                       :rules="rules.bankNo">
                         <el-input v-model="scope.row.bankNo"></el-input>
                     </el-form-item>
                  </template>
            </el-table-column>
       </el-table>
</el-form>

script

{
   ...
   data(){
        var checkValue = (rule, value,) => {
            // 只能输入数字（正数和负数，小数整数）
            let reg =/^([-+]?[0-9]+[\d]*(.[0-9]{1,})?)$/
            let res = reg.test(value);
            if(res){
                callback();
            }else{
                callback(new Error(""))
            }            
        }
        return {
            sceneForm:{
                sceneData:[
                    { bankNo: '' }
                ]
            },
            rules:{
                bankNo:[{ required: true,message :"",validator:checkValue ,trigger: "blur"}]
            },
        }
    },
    
    methods:{
        // handleSubmit
        handleSubmit() {
            this.$refs.sceneForm.validate((valid) => {
                if(!valid) return false
                // TODO
                // bussiness code ...
            }    
        }
    }
    ...
}