element-ui 解决table里包含表单验证

实际项目中的场景，需要在table里做表单验证，如下图所示

其实问题关键就在于如何给el-form-item动态绑定prop

      :prop="'phones.' + scope.$index + '.字段名'"

<el-form :model="dataForm" ref="dataForm" :rules="rules">
        <el-table :data="dataForm.phones" border stripe :index="true" ref="dataList" max-height="400">
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column prop="name" label="姓名" header-align="center" align="center" width="120">
            <template slot-scope="scope">
              <el-col >
              <el-form-item :prop="'phones.'+ scope.$index + '.name'" 
              :rules="phonesRules.name">
                <el-input v-model="scope.row.name" placeholder="姓名"></el-input>
              </el-form-item>
              </el-col>
            </template>
          </el-table-column>
          <el-table-column prop="idCard" label="身份证号码" header-align="center" align="center" width="220">
            <template slot-scope="scope">
              <el-form-item :prop="'phones.'+ scope.$index + '.idCard'" 
              :rules="phonesRules.idCard">
                <el-input v-model="scope.row.idCard" placeholder="身份证号码" maxlength="18"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系电话" header-align="center" align="center" width="200">
            <template slot-scope="scope">
              <el-form-item :prop="'phones.'+ scope.$index + '.phone'" 
              :rules="phonesRules.phone">
                <el-input v-model="scope.row.phone" placeholder="联系电话" maxlength="11"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="project" label="培训项目" header-align="center" align="center" width="160">
            <template slot-scope="scope">
              <el-form-item :prop="'phones.'+ scope.$index + '.project'" 
              :rules="phonesRules.project">
                <el-input v-model="scope.row.project" placeholder="培训项目"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="spotTm" label="电话抽查时间" header-align="center" align="center" width="200">
            <template slot-scope="scope">
              <el-form-item :prop="'phones.'+ scope.$index + '.spotTm'" 
              :rules="phonesRules.spotTm">
                <el-date-picker v-model="scope.row.spotTm" placeholder="时间"></el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" header-align="center" align="center" width="50">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="delHandle(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    </el-form>
</template>

 phonesRules:{
    
    
          name: [
            {
    
     required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          idCard: [
            {
    
     required: true, message: '请输入身份证号码', trigger: 'blur' },
            {
    
    
              pattern:/^\d{15}|\d{18}$/,
              message: "身份证号码格式错误",
              trigger: "blur"
            }
          ],
          phone: [
            {
    
     required: true, message: '请输入联系电话', trigger: 'blur' },
            {
    
    
              pattern:/^1[0-9]{10}$/,
              message: "联系电话格式不正确",
              trigger: "blur"
            }
          ],
          project: [
            {
    
     required: true, message: '请输入培训项目', trigger: 'blur' }
          ],
          spotTm: [
            {
    
     required: true, message: '请选择电话抽查时间', trigger: 'blur' }
          ],
        },

遇到了因为浏览器问题的原因，导致table的样式有问题，增加以下代码解决。

<style lang="scss" >
  .elTable{
    
    
    .el-table .cell, .el-table th div{
    
    
      white-space: normal!important;
    }
  }
</style>