表格行input校验

Posted 2021-03-10 0520euv

最近改需求，碰到个表格行内input需要校验的。

解决方法：

1、先用el-form将表格包裹起来

2、 表格有个 scope.$index 可以使用

具体代码如下:

 1 <el-form :model="tableForm">
 2      <el-table:data="tableForm.tableData">
 5 
 6            <el-table-column prop="Count" label="数量" >
 8               <template slot-scope="scope">
 9                 <el-form-item :prop="‘tableData.‘ + scope.$index + ‘.count‘"
10                               :rules="[{required: true, message: ‘请输入数量*‘, trigger: ‘blur‘}]">
11                   <el-input
12                     size="small"
13                     v-model="scope.row.count"
14                     placeholder="请输入配送数量"
15                   ></el-input>
16                 </el-form-item>
17               </template>
18             </el-table-column>
19 </el-form>

data(){
　　return {

  tableForm: {

     tableData: [],

        },

}
}