vue+elementUI实现可编辑动态表格，带效果图

记录一些最近做项目遇到的一些坑，顺便分享出来实现的效果。
1、无法输入编辑
2、删除输入框报错
3、点击编辑，无法载入数据
4、删除表格内输入框时序号错乱，报错，无法输入…
…
下面是动态生成表格形式的表单，效果图

  <!--修改弹出框-->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogTableVisible"
      :title="textMap[dialogStatus]"
      @dragDialog="handleDrag"
    >
      <div
        style="width:100%; height:1px; background:#eee; border:none; margin:0px auto; margin-top:-30px; margin-bottom:30px;"
      ></div>
      <el-form
        ref="dataForm"
        :inline="true"
        :rules="rules"
        :model="query"
        class="demo-form-inline"
        label-width="120px"
        style="margin:0 auto"
      >
        <div style="width:100%;border-bottom:1px solid rgb(182, 182, 182,0.3);padding-bottom:15px">
          <div style="margin-bottom:10px;margin-right:10px;margin-top:-10px">基本信息</div>
          <div style="margin:10px;margin-left:0px">
            <span>年度&nbsp;</span>
            <el-date-picker v-model="timeYear" value-format="yyyy" type="year" placeholder="选择年度"></el-date-picker>
            <span>&nbsp;标题&nbsp;</span>
            <el-input style="width:200px" size="small" v-model="title  "></el-input>
          </div>
          <div style="margin-top:20px">
            <span>评议内容</span>
            <span style="color:blue;margin-left:15px;cursor: pointer;" @click="addTable">新增+</span>
          </div>
        </div>

        <div class="dialog" v-for="(item,index) in allNum" :key="index">
          <div class="title">
            <span>活动标题&nbsp;&nbsp;</span>
            <el-input style="width:150px" size="small" v-model="queryData[index]['itemName']"></el-input>
            <span>&nbsp;分值（分）&nbsp;&nbsp;</span>
            <el-input style="width:100px" size="small" v-model="queryData[index]['score']"></el-input>
            <span style="margin-left:100px;color:blue;cursor: pointer;" @click="deleTable(index)">删除</span>
          </div>
          <el-table
            :data="tableNum['num'+index]"
            size="mini"
            row-key="id"
            border
            highlight-current-row
            style="width: 100%"
            :header-cell-style="{background:'#f1f1f1'}"
          >
            <el-table-column label="序号" width="50px" prop="id" fixed="left"></el-table-column>
            <el-table-column label="细则" width="300">
              <template slot-scope="scope">
                <el-input
                  style="width:250px"
                  v-model="queryData[index].tbReviewDetails[scope.row.id-1].detailName"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="分值" width="300">
              <template slot-scope="scope">
                <el-input
                  style="width:250px"
                  v-model="queryData[index].tbReviewDetails[scope.row.id-1].score"
                ></el-input>
              </template>
            </el-table-column>
            <!--操作-->
            <el-table-column label="操作" align="center" fixed="right">
              <template slot-scope="{row}">
                <span class="spanBtn" @click="editDelete(row.id,index)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="add-table" @click="addInput(index)">添加</div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogTableVisible = false">取消</el-button>
        <el-button size="mini" v-if="dialogType==0" type="primary" @click="createData">确认</el-button>
        <el-button size="mini" v-if="dialogType==1" type="primary" @click="editData">确认</el-button>
      </div>
    </el-dialog>

js：

```javascript
data(){
	  allNum: [1],
      tableNum: {
        num0: [{ id: 1 }]
      },
       timeYear: "",
       title: "",
       queryData: [
        {
          score: "",
          itemName: "",
          tbReviewDetails: [
            {
              score: "",
              detailName: ""
            }
          ]
        }
      ],
},
 methods: {
    addTable() {
      this.allNum.push(this.allNum.length);
      var count = this.queryData.length;
      this.$set(this.queryData, count, {
        tbReviewDetails: [
          {
            score: "",
            detailName: ""
          }
        ],
        score: "",
        itemName: ""
      });
      this.tableNum["num" + count] = [
        {
          id: 1
        }
      ];
    },
    deleTable(index) {
      this.allNum.splice(index, 1);
      var len = this.queryData.length;
      var count = 0;
      for (var i in this.tableNum) {
        count++;
      }
      delete this.tableNum["num" + index];
      for (var i = index; i < count; i++) {
        this.tableNum["num" + i] = this.tableNum["num" + (i + 1)];
        if (this.tableNum["num" + i] == undefined) {
          delete this.tableNum["num" + i];
        }
      }
      this.queryData.splice(index, 1);
    },
    addInput(index) {
      var len = this.queryData[index].tbReviewDetails.length;
      this.queryData[index].tbReviewDetails.push({
        score: "",
        detailName: ""
      });
      this.tableNum["num" + index].push({
        id: this.tableNum["num" + index].length + 1
      });
    },
    editDelete(ids, index) {
      var data = this.tableNum["num" + index];
      var count = data.length;
      let j = "";
      for (var i = 0,len=data.length;i < len; i++) {
        if (data[i].id == ids) {
          data.splice(i, 1);
          j = i;
        }
      }
      for (var i = j,leng=this.tableNum["num" + index].length; i < leng; i++) {
        this.tableNum["num" + index][i].id--;
      }
      this.queryData[index].tbReviewDetails.splice(ids - 1, 1);
    }
  }

注意，如果是动态写入默认数据，比如是编辑，不能直接使用赋值方式，否则会保错，需要使用this.$set( target, key, value )，如果是添加（新增）的话就需要赋予第一个值

    // 修改的编辑弹窗
    handleUpdate(row) {
      getReview(row.id).then(response => {
      this.reviewDetail = response.data;
      this.dialogStatus = "update";
      this.dialogType = 1;
      this.allNum=[]
      this.queryData=[]
      this.tableNum={}
      this.title=response.data.title
      this.timeYear=response.data.timeYear
      for(var i=0;i<this.reviewDetail.reviewItemDtoList.length;i++){
          this.allNum.push(i)
          this.$set(this.queryData,i, this.reviewDetail.reviewItemDtoList[i]);
        for(var j=0;j<this.reviewDetail.reviewItemDtoList[i].tbReviewDetails.length;j++){
      this.$set(this.tableNum,'num'+i,[{id:j+1}])
        }
      }
      this.dialogTableVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
      });
    },