Element中el-form嵌套el-table双击编辑提交检验

 <el-form ref="form" :rules="rules" :model="form">
      <el-table
        class="treat-table"
        :data="form.dataTable.slice((pageIndex-1)*pageSize,pageIndex*pageSize)"
        height="100%"
        @cell-dblclick="dbClickHandle"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="50" />

        <el-table-column label="序号" width="60px" align="center">
          <template slot-scope="scope">
            {{ setIndex(scope.$index,pageIndex,pageSize) }}
          </template>
        </el-table-column>

        <el-table-column label="设备名称" width="100px" show-overflow-tooltip prop="AssetName" />

        <el-table-column label="策略名称" prop="RuleName">
          <template slot-scope="{row,$index}">
            <el-form-item v-if="showEdit[$index]['RuleName']" class="el-form-item-class" :prop=" 'dataTable.' + $index + '.RuleName' " :rules="rules.RuleName" :data="form.dataTable.RuleName">
              <el-input
                :ref="'RuleName'+$index"
                v-model="row.RuleName"
                @keyup.enter.native="$event.target.blur"
                @change="handleEdit(row, $index)"
                @blur="inputBlur(row,$index,'RuleName')"
              />
            </el-form-item>
            <span v-if="!showEdit[$index]['RuleName']">{{ row.RuleName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="协议" prop="Prot" width="100">
          <template slot-scope="{row,$index}">
            <el-form-item v-if="showEdit[$index]['Prot']" class="el-form-item-class" :prop=" 'dataTable.' + $index + '.Prot' " :data="form.dataTable.Prot">
              <el-select
                :ref="'Prot'+$index"
                v-model="row.Prot"
                filterable
                @visible-change="visibleChange($event,row,$index,'Prot')"
                @change="selectChange(row, $index)"
              >
                <el-option
                  v-for="item in protList"
                  :key="item.id"
                  :label="item.Prot"
                  :value="item.Prot"
                />
              </el-select>
            </el-form-item>

            <span v-if="!showEdit[$index]['Prot']">{{ row.Prot }}</span>
          </template>
        </el-table-column>

        <el-table-column label="业务规则" prop="BusinessIndex" width="150">
          <template slot-scope="{row,$index}">
            <el-form-item v-if="showEdit[$index]['BusinessIndex']" class="el-form-item-class" :prop=" 'dataTable.' + $index + '.BusinessIndex' " :data="form.dataTable.BusinessIndex">
              <el-select
                :ref="'BusinessIndex'+$index"
                v-model="row.BusinessIndex"
                filterable
                @visible-change="visibleChange($event,row,$index,'BusinessIndex')"
                @change="selectChange(row, $index)"
              >
                <el-option
                  v-for="item in businessList"
                  :key="item.BusinessIndex"
                  :label="item.BusinessName"
                  :value="item.BusinessIndex"
                />
              </el-select>
            </el-form-item>

            <span v-if="!showEdit[$index]['BusinessIndex']">{{ toBusiness(row.BusinessIndex) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="源地址" prop="Srcip" width="220">
          <template slot-scope="{row,$index}">
            <el-form-item v-if="showEdit[$index]['Srcip']" :prop=" 'dataTable.' + $index + '.Srcip' " :rules="rules.Srcip">
              <el-input
                :ref="'Srcip'+$index"
                v-model="row.Srcip"
                oninput="value=value.replace(/[ a-zA-Z`~!@#$%^&()_+=<>?{}|,;'\\[\]·~！@#￥%……&（）——+={}|《》？：“”【】、；‘’，。、\u4e00-\u9fa5]/g, '')"
                @keyup.enter.native="$event.target.blur"
                @change="handleEdit(row, $index)"
                @blur="inputBlur(row,$index,'Srcip')"
              />
            </el-form-item>
            <span v-if="!showEdit[$index]['Srcip']">{{ row.Srcip }}</span>

          </template>
        </el-table-column>

        <el-table-column label="源端口" prop="Srcport" width="120">
          <template slot-scope="{row,$index}">
            <el-form-item v-if="showEdit[$index]['Srcport']" :prop=" 'dataTable.' + $index + '.Srcport' " :rules="rules.Srcport">
              <el-input
                :ref="'Srcport'+$index"
                v-model="row.Srcport"
                oninput="value=value.replace(/[ a-zA-Z`~!@#$%^&()_+=<>?{}|,;'\\[\]·~！@#￥%……&（）——+={}|《》？：“”【】、；‘’，。、\u4e00-\u9fa5]/g, '')"
                @keyup.enter.native="$event.target.blur"
                @change="handleEdit(row, $index)"
                @blur="inputBlur(row,$index,'Srcport')"
              />
            </el-form-item>
            <span v-if="!showEdit[$index]['Srcport']">{{ row.Srcport }}</span>

          </template>
        </el-table-column>

        <el-table-column label="目的地址" prop="Dstip" width="220">
          <template slot-scope="{row,$index}">
            <el-form-item v-if="showEdit[$index]['Dstip']" :prop=" 'dataTable.' + $index + '.Dstip' " :rules="rules.Dstip">
              <el-input
                :ref="'Dstip'+$index"
                v-model="row.Dstip"
                oninput="value=value.replace(/[ a-zA-Z`~!@#$%^&()_+=<>?{}|,;'\\[\]·~！@#￥%……&（）——+={}|《》？：“”【】、；‘’，。、\u4e00-\u9fa5]/g, '')"
                @keyup.enter.native="$event.target.blur"
                @change="handleEdit(row, $index)"
                @blur="inputBlur(row,$index,'Dstip')"
              />
            </el-form-item>
            <span v-if="!showEdit[$index]['Dstip']">{{ row.Dstip }}</span>

          </template>
        </el-table-column>

        <el-table-column label="目的端口" prop="Dstport" width="120">
          <template slot-scope="{row,$index}">
            <el-form-item v-if="showEdit[$index]['Dstport']" :prop=" 'dataTable.' + $index + '.Dstport' " :rules="rules.Dstport">
              <el-input
                :ref="'Dstport'+$index"
                v-model="row.Dstport"
                oninput="value=value.replace(/[ a-zA-Z`~!@#$%^&()_+=<>?{}|,;'\\[\]·~！@#￥%……&（）——+={}|《》？：“”【】、；‘’，。、\u4e00-\u9fa5]/g, '')"
                @keyup.enter.native="$event.target.blur"
                @change="handleEdit(row, $index)"
                @blur="inputBlur(row,$index,'Dstport')"
              />
            </el-form-item>
            <span v-if="!showEdit[$index]['Dstport']">{{ row.Dstport }}</span>

          </template>
        </el-table-column>

        <el-table-column label="启用" align="center" width="50">
          <template slot-scope="scope">
            <el-switch
              :value="scope.row.using"
              active-color="#227EE1"
              inactive-color="#BCBCBC"
              @change="changeC(scope.row)"
            />
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-tooltip content="下发" placement="top" effect="light">
              <img
                style="cursor: pointer;height:13px;width:13px"
                :src="require('@/assets/button-Icon/down1.png')"
                @click="IssueHandleCheck([scope.row])"
              >
            </el-tooltip>
            <el-tooltip content="关联事件" placement="top" effect="light">
              <img
                style="margin-top:5px;cursor: pointer;margin-left:10px"
                :src="require('@/assets/button-Icon/associate.png')"
                @click="openEventDialog(scope.row)"
              >
            </el-tooltip>
          </template>
        </el-table-column>

      </el-table>
    </el-form>

　　js：

export default {
  name: 'GatekeeperTreat',
  components: {
    ComponentEventsDialog,
    ComponentLoginValidate
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function(el) {
        el.focus()
      }
    }
  },
  data() {
    // 判断Ip
    var checkIp = (rule, value, callback) => {
      checkValidateIpAndPort(value, 'IP', callback)
      callback()
    }
    //  判断端口
    var checkPort = (rule, value, callback) => {
      checkValidateIpAndPort(value, 'PORT', callback)
      callback()
    }
    return {
      form: {
        dataTable: [
        ]
      },
      // dataTable: [],
      pageIndex: 1,
      pageSize: 15,
      totleCount: 0,
      multipleSelection: [],
      loading: false,
      businessList: [
        { BusinessIndex: 0,
          BusinessName: '无' }
      ],

      // 显示编辑框
      showEdit: [],

      // 协议数据
      protList: [
        {
          id: 0,
          Prot: 'TCP'
        },
        {
          id: 1,
          Prot: 'UDP'
        },
        {
          id: 2,
          Prot: 'ICMP'
        }
      ],

      loginIshow: false, // 是否显示二次验证弹框

      // 校验
      rules: {
        // 名称
        RuleName: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          { min: 1, max: 63, message: '长度在 1 到 63 个字符', trigger: 'blur' }
        ],
        // 源地址
        Srcip: [
          { required: true, message: '源地址不能为空', trigger: 'blur' },
          { validator: checkIp, trigger: 'blur' }
        ],
        // 源端口
        Srcport: [
          { required: true, message: '源端口不能为空', trigger: 'blur' },
          { validator: checkPort, trigger: 'blur' }
        ],
        // 目的地址
        Dstip: [
          { required: true, message: '目的地址不能为空', trigger: 'blur' },
          { validator: checkIp, trigger: 'blur' }
        ],
        // 目的端口
        Dstport: [
          { required: true, message: '目的端口不能为空', trigger: 'blur' },
          { validator: checkPort, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    // 监控tableData数据，发生改变的时候跟新单元格显示状态
    'form.dataTable': function() {
      this.setShowEdit()
    }
  },
  methods: {
    showUs(datas) {
      this.analysis(datas)
    },
    setIndex(index, page, size) {
      return index + 1 + (page - 1) * size
    },
    visibleChange(flag, row, index, column) {
      if (!flag) {
        this.inputBlur(row, index, column)
      }
    },
    // 初始化单元格显示状态
    setShowEditInit() {
      for (const item of this.showEdit) {
        for (const innerItem in item) {
          item[innerItem] = false
        }
      }
    },

    // 设置单元显示转换数据
    setShowEdit() {
      const tempShowEdit = []
      for (const item of this.form.dataTable) {
        const tempShow = {}
        for (const innerItem in item) {
          tempShow[innerItem] = false
        }
        tempShowEdit.push(tempShow)
      }
      this.showEdit = tempShowEdit
    },

    // 切换单元格为编辑
    dbClickHandle(row, column, cell, event) {
      const nowObj = column.property
      const index = this.form.dataTable.indexOf(row)
      this.showEdit[index][nowObj] = true

      if (nowObj === 'BusinessIndex') {
        this.getBusinessHandle(row.Code)
      }

      this.$nextTick(() => {
        this.$refs[nowObj + index].focus()
      })
    },

    // 点击修改
    handleEdit(row, index) {
      this.form.dataTable[index] = row
    },

    // 失焦
    inputBlur(row, index, column) {
      const idx = this.form.dataTable.indexOf(row)
      if (idx === index) {
        var datas = this.showEdit[index]
        var prop = 'dataTable.' + index + '.' + column

        this.$refs['form'].validateField(prop, (error) => {
          if (!error) {
            if (datas) {
              for (const innerItem in datas) {
                if (innerItem === column && datas[innerItem]) {
                  datas[innerItem] = false
                }
              }
            }
          }
        })
      }
    },

    // 下拉框修改
    selectChange(row, index) {
      const tempTableData = this.form.dataTable
      tempTableData[index] = row
      this.form.dataTable = tempTableData
    },


    // 下发（校验有错误不让下发）
    IssueHandleCheck(datas) {
      this.$refs['form'].validate((valid) => {
        if (!valid) return
        if (datas && datas.length > 0) {
          this.$refs.LoginValidateRef.showUs()

          if (this.loginIshow) {
            this.$refs.LoginValidateRef.executePar(() => {
              this.loading = true
              this.bulkAddGatekeeper(datas)
            })
          } else {
            this.loading = true
            this.bulkAddGatekeeper(datas)
          }
        } else {
          this.$message.info('请选择下发策略')
          this.loading = false
        }
      })
    },

    bulkAddGatekeeper(datas) {
      bulkAddGatekeeper(datas, this.$store.state.user.accountName).then(res => {
        if (res) {
          if (res.code === 0) {
            this.$message.success('策略下发成功')
            this.$emit('initData', true)
          } else {
            this.$message.error(res.msg)
          }
        }
        this.loading = false
      }).catch(err => {
        this.loading = false
        console.error(err)
      })
    },

    toBusiness(str) {
      var result = '无'
      for (var business of this.businessList) {
        if (business.BusinessIndex === str) {
          result = business.BusinessName
          break
        }
      }
      return result
    },

    // 单选框选中获取数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 页面改变
    pageSizeChange(pageSize) {
      this.pageSize = pageSize
    },

    // 当前页
    pageCurrentChange(pageIndex) {
      this.pageIndex = pageIndex
    },

    // 获取业务规则
    async getBusinessHandle(id) {
      const data = {
        id: id
      }
      this.businessList = [
        { BusinessIndex: 0,
          BusinessName: '无' }
      ]
      await LoadBusiness(data).then(res => {
        if (res) {
          if (res.code === 0) {
            this.businessList = []
            this.businessList = res.data.data.Data
            this.businessList.unshift({
              BusinessIndex: 0,
              BusinessName: '无'
            })
          } else {
            this.$message.error(res.msg)
          }
        }
      })
    },
    openEventDialog(data) {
      this.$refs.eventsDialogRef.showUs(data)
    },
    // 是否启用
    changeC(data) {
      data.using = !data.using
    }
  }
}