el-table 可编辑并进行必填校验

1.场景：没有失效时间的时候，为可编辑

效果图：

2.代码 

//想使用校验必然就得使用 el-form
<el-form :model="form" ref="form" :rules="rules" class="demo-ruleForm">
            //绑定到表格数据
            <el-table class="table-cursor" :data="form.tableData" border>
                //自动生序号：只需要将 type="index"加上
                <el-table-column type="index" label="序号" align="center">
                </el-table-column>
                <el-table-column prop="waterUseType" label="结算模式" align="center">
                    //使用插槽为了插入别的组件
                    <template slot-scope="scope">
                      //为了添加必填校验 :prop="'tableData.' + scope.$index + '.waterUseType'"  这个是一个点，精确对表格中的某一项进行校验
                        <el-form-item :prop="'tableData.' + scope.$index + '.waterUseType'" :rules="{
                            required: true,
                            message: '值不能为空',
                            trigger: 'change',
                        }">
                        //没有某个值得时候使用el-select组件
                            <el-select v-if="!scope.row.expiryDate" clearable v-model="scope.row.waterUseType" filterable
                                class="dis-time">
                                <el-option v-for="item in waterUseTypeTypeList" :key="item.enumValue" :label="item.enumName"
                                    :value="item.enumValue+''"></el-option>
                            </el-select>
                     //有某个值得时候用文本展示
                            <span v-else>{{ scope.row.waterUseName }}</span>
                        </el-form-item>
                    </template>
                </el-table-column>     
            </el-table>
</el-form>

自动生序号：只需要将 type="index"加上

 <el-table-column type="index" label="序号" align="center">
</el-table-column>

为了添加必填校验 :prop="'tableData.' + scope.$index + '.waterUseType'"  这个是一个点，精确对表格中的某一项进行校验

<el-form-item :prop="'tableData.' + scope.$index + '.waterUseType'" 
            :rules="{required: true, message: '值不能为空',trigger: 'change',}">
</el-form-item>