element el-table嵌套input输入框动态添加 form动态表单验证实现

<template>
  <div style="background:white;">
    <el-table
      :data="yawTable"
      border
      size="small"
      style="width: 100%"
      height="235"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="yaw_index" label="偏航次数" width="70"> </el-table-column>
      <el-table-column prop="point_id" label="偏航点序号" width="100"> </el-table-column>
      <el-table-column prop="yaw_point_index" label="偏航真值点位序号" width="220">
        <template slot-scope="scope">
          <el-form :ref="'ruleForm' + scope.row.yaw_index" :model="scope.row" :rules="rules">
            <el-form-item prop="yaw_point_index">
              <el-input v-model="scope.row.yaw_point_index" size="small"></el-input>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="70">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            :disabled="scope.$index === currentYawIndex"
            @click="examine(scope)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:center;padding:10px 0;">
      <el-button type="primary" size="small" @click="preserve">保存</el-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
const validateYawPoint = (rule, value, callback) => {
// value.split(/[\n\s+,，]/g) //全局切换含有逗号（中/英）字符串（可自行选择）
  let getLocation = value.split(/[\n\s+,]/g) 
  if (!value) {
    return callback(new Error('请输入偏航真值点位序号！'))
  }
  for (let item of getLocation) {
    if (!(item.split('-').length > 1) && !Number(item)) {
      return callback(new Error("多个点以英文','分隔，或'-'表示范围"))
    } else if (item.split('-').length > 1) {
      let lr = item.split('-')
      for (let i of lr) {
        if (!Number(i)) {
          return callback(new Error("多个点以英文','分隔，或'-'表示范围"))
        }
      }
    }
  }
  return callback()
}
export default Vue.extend({
  name: 'YawPanel',
  data() {
    return {
      // input框失焦校验
      rules: {
        yaw_point_index: [{ validator: validateYawPoint, trigger: 'blur' }],
      },
      yawTable:[{
      point_id:'1121211',
      yaw_point_index:'',
      annotator:'wgng',
      yaw_index:'1',
      yaw_route:''
    },{
      point_id:'1121211',
      yaw_point_index:'',
      annotator:'wwang',
      yaw_index:'2',
      yaw_route:''
    },{
      point_id:'11211',
      yaw_point_index:'',
      annotator:'wang',
      yaw_index:'3',
      yaw_route:''
    },{
      point_id:'数据',
      yaw_point_index:'',
      annotator:'angpe',
      yaw_index:'4',
      yaw_route:''
    },{
      point_id:'1121211',
      yaw_point_index:'',
      annotator:'wb15',
      yaw_index:'5',
      yaw_route:''
    },],
    traceId:'qw_20120913_1233243r5_23454322312',
    currentYawIndex:0,
    }
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      return rowIndex === this.currentYawIndex ? 'checked-row' : ''
    },
    // 查看
    examine({ $index }) {
      this.currentYawIndex = $index
    },
    // 保存
    async preserve() {
       // 获取到的ref进行循环
      let isShow = []
      for (let item in this.$refs) {
        this.$refs[item].validate(valid => {
          if (!valid) return false
          isShow.push(true)
        })
      }
      //此处进行最终校验
      if (isShow.length === Object.keys(this.$refs).length && isShow.every(item => item)) {
       let result =  await this.$http.get(`/saml/List`, { num:1 }).catch(e => {throw e})
      }
    },
  },
})
</script>

<style lang="scss" scoped>
::v-deep .el-table .checked-row {
  background: #dcdfe6;
}
</style>

效果展示