iview 可编辑表格实现

第一步，定义：
<Form ref="formItem" :model="formItem" :rules="formRules" :label-width="80">
        <Button class="button" type="success" style="margin-left: 1099px;margin-bottom:10px;" @click="add">新增</Button>
            <Table max-height="1000px" style="overflow: visible;margin-left:20px;" border stripe :columns="columns" :data="formItem.applyTasks">
               <template slot-scope="{ row, index  }" slot="partId" style="height:30px;">
                <FormItem :prop="`applyTasks.${index}.partId`" :label-width="0" :rules="formRules.partId">
                  <Select v-model="formItem.applyTasks[index].partId" transfer class="itemClass" >
                    <Option v-for="item in parts" :key="item.dvalue" :value="item.id">
                      {{item.dvalue}}
                    </Option>
                  </Select>
                </FormItem>
              </template>
              <template slot-scope="{ row, index  }" slot="imageId">
                <FormItem :prop="`applyTasks.${index}.imageId`" :label-width="0" :rules="formRules.imageId">
                  <Select v-model="formItem.applyTasks[index].imageId" transfer class="itemClass">
                    <Option v-for="item in images" :key="item.name" :value="item.id">
                      {{item.name}}
                    </Option>
                  </Select>
                </FormItem>
              </template>
              <template slot-scope="{ row, index  }" slot="netId">
                <FormItem :prop="`applyTasks.${index}.netId`" :label-width="0" :rules="formRules.netId">
                  <Select v-model="formItem.applyTasks[index].netId" transfer class="itemClass">
                    <Option v-for="item in netZones" :key="item.dvalue" :value="item.id">
                      {{item.dvalue}}
                    </Option>
                  </Select>
                </FormItem>
              </template>
              <template slot-scope="{ row, index }" slot="cpu">
                <FormItem :prop="`applyTasks.${index}.cpu`" :label-width="0" :rules="formRules.cpu">
                  <Input v-model="formItem.applyTasks[index].cpu" class="itemClass"/>
                </FormItem>
              </template>
              <template slot-scope="{ row, index }" slot="ram">
                <FormItem :prop="`applyTasks.${index}.ram`" :label-width="0" :rules="formRules.ram">
                  <Input v-model="formItem.applyTasks[index].ram" class="itemClass"/>
                </FormItem>
              </template>
              <template slot-scope="{ row, index }" slot="disk">
                <FormItem :prop="`applyTasks.${index}.disk`" :label-width="0" :rules="formRules.disk">
                  <Input v-model="formItem.applyTasks[index].disk" class="itemClass"/>
                </FormItem>
              </template>
              <template slot-scope="{ row, index }" slot="num">
                <FormItem :prop="`applyTasks.${index}.num`" :label-width="0" :rules="formRules.num">
                  <Input v-model="formItem.applyTasks[index].num" class="itemClass"/>
                </FormItem>
              </template>
              <template slot-scope="{ row, index }" slot="purpose">
                <FormItem :prop="`applyTasks.${index}.purpose`" :label-width="0">
                  <Input v-model="formItem.applyTasks[index].purpose" class="itemClass"/>
                </FormItem>
              </template>
              <template slot-scope="{ row, index }" slot="operation">
                <Button style="margin-bottom:7px;" type="error" size="small" @click="handleDelete(index)">删除</Button>
              </template>
            </Table>
        </form>

第二步：设置列：

columns:[
          {
              title: '区域',
              slot: 'partId',
              width: 150,
          },
          {
              title: '镜像',
              slot: 'imageId',
              width: 200,
          },
          {
              title: '网络域',
              slot: 'netId',
              width: 140,
          },
          {
              title: 'CPU(核)',
              slot: 'cpu',
              width: 110,
          },
          {
              title: '内存(G)',
              slot: 'ram',
              width: 110,
          },
          {
              title: '硬盘(G)',
              slot: 'disk',
              width: 110,
          },
          {
              title: '数量',
              slot: 'num',
              width: 110,
          },
          {
              title: '用途',
              slot: 'purpose',
              width: 135,
          },
          {
              title: "操作",
              slot: "operation",
              width: 80,
            }     
        ],

第三步：定义规则

formRules: {
            partId:[
              {required: true, message: "请选择区域", trigger: 'change'},
            ],
            imageId:[
              {required: true, message: "请选择镜像", trigger: 'change'},
            ],
            netId:[
              {required: true, message: "请选择网络域", trigger: 'change'},
            ],
            cpu:[
                { required: true,message: '请输入CPU', trigger: 'blur' },
                { pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数', trigger: 'blur' },
            ],
            ram:[
                { required: true, message: '请输入内存', trigger: 'blur' },
                { pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数', trigger: 'blur' },
            ],
            disk:[
                { required: true,message: '请输入硬盘', trigger: 'blur' },
                { pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数', trigger: 'blur' },
            ],
            num:[
                { required: true, message: '请输入数量', trigger: 'blur' },
                { pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数', trigger: 'blur' },
            ],
        },

第四步：定义方法

add() {
      const addData = {
        id:"",
        partId:"",
        num:"",
        imageId:"",
        netId:"",
        cpu:'',
        ram:'',
        disk:'',
        purpose:'',
      };
      this.formItem.data.push(addData);
    },
handleDelete(index){
      if(this.formItem.applyTasks.length<=1){
        Message.warning("请至少留一行，如果一行都不存在，添加行的方法会有问题！");
        return false;
      }
      this.formItem.data.splice(index, 1);
    },