el-table表格里输入，并且校验。$index undifine问题

弹窗中是表格列表，input框输入，并校验

效果

实现思路：在 el-table外面套一层 el-form,引用 el-form的校验方式，但注意！！里面el-tabel的 input外面还有一层 el-form-item !!

el-form上加  :model="netForm" :rules="rules" ref="netForm"

el-table上加：ref="table-input" :data="netForm.networkCardsList"

el-table-column上加：label="网卡接口名称" show-overflow-tooltip

el-form-item上加：:prop="'networkCardsList.' + scope.$index + '.interfaceName'" :rules="rules.interfaceName"

这四层都别忘记加！或者搞错位了！因为开发的时候，插槽插入了 input,在然后后面 rules啥的都加在el-table-column，结果发现报错$index undifine ，因为少了el-form-item！

正确写法：如下

 <el-dialog title="网卡信息列表" :visible.sync="networkCardsVisibleEdit">
      <el-form class="base-form" :model="netForm" :rules="rules" ref="netForm" auto-complete="on">
        <el-table ref="table-input" :data="netForm.networkCardsList">
          <el-table-column label="网卡接口名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'networkCardsList.' + scope.$index + '.interfaceName'" :rules="rules.interfaceName" class="all">
                <el-input v-model="scope.row.interfaceName" placeholder="请输入" clearable @focus="$refs.netForm.clearValidate(`networkCardsList.${scope.$index}.interfaceName`)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="mac 地址" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'networkCardsList.' + scope.$index + '.macAddress'" :rules="rules.macAddress" class="all">
                <el-input v-model="scope.row.macAddress" placeholder="请输入" clearable @focus="$refs.netForm.clearValidate(`networkCardsList.${scope.$index}.macAddress`)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="ip 地址" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'networkCardsList.' + scope.$index + '.ipAddress'" :rules="rules.ipAddress" class="all">
                <el-input v-model="scope.row.ipAddress" placeholder="请输入" clearable @focus="$refs.netForm.clearValidate(`networkCardsList.${scope.$index}.ipAddress`)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button slot="reference" @click="delRow(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item style="margin: 0; text-align: center; padding-top: 20px">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="cancelNetCard">取消</el-button>
        </el-form-item>
      </el-form>

      <!-- <div >
          <el-button @click="submit">提交</el-button>
        <el-button @click="cancelNetCard">取消</el-button>
      </div> -->
    </el-dialog>

export default {
  name: 'productList',
  data() {
    return {
      netForm: {
        networkCardsList: [
          {
            interfaceName: '',
            macAddress: '',
            ipAddress: '',
          },
        ],
      },
      networkCardsVisible: false,
 rules: {
        interfaceName: [{ max: 200, message: '网卡接口名称最多可输入200个字符', trigger: 'change' }],
        macAddress: [{ max: 200, message: 'mac 地址最多可输入200个字符', trigger: 'change' }],
        ipAddress: [{ max: 200, message: 'ip 地址最多可输入200个字符', trigger: 'change' }],
      },
 }
 }
}