动态添加表格

 

<el-table
    ref="partsTable"
    :data="tableDataParts"
    highlight-current-row
    @current-change="handleCurrentChange"
    style="width: 100%">
    <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column property="partso" label="配件1" width="120">
            <template slot-scope="scope">
               <el-input
                  clearable
                  v-model="scope.row.partso"
                  placeholder="请输入配件"
               ></el-input>
             </template>
         </el-table-column>
         <el-table-column property="numo" label="配件数量1" width="120">
            <template slot-scope="scope">
               <el-input
                  clearable
                  v-model="scope.row.numo"
                  placeholder="请输入数量"
               ></el-input>
             </template>
         </el-table-column>
         <el-table-column property="partst" label="配件1" width="120">
            <template slot-scope="scope">
               <el-input
                  clearable
                  v-model="scope.row.partst"
                  placeholder="请输入配件"
               ></el-input>
            </template>
         </el-table-column>
         <el-table-column property="numt" label="配件数量1" width="120">
            <template slot-scope="scope">
               <el-input
                  clearable
                  v-model="scope.row.numt"
                  placeholder="请输入数量"
               ></el-input>
            </template>
         </el-table-column>
</el-table>
<el-button icon="el-icon-plus" @click="addTableParts" type="primary">
　　添加配件信息
</el-button>


data() {
    return {
        objParts: {
        partso: "",
        numo: "",
        partst: "",
        numt: ""
      },
      tableDataParts: [
        {
          partso: "",
          numo: "",
          partst: "",
          numt: ""
        },
      ],
     currentRow: null,
    }
},

methods:{
  // 添加-配件
    addTableParts() {
　　　　this.tableDataParts.push(JSON.parse(JSON.stringify(this.objParts)));
    },  
　　handleCurrentChange(val) {
      this.currentRow = val;
    },
}

多个表格同时添加

<div
   style="border:1px solid rgba(204, 204, 204, 0.5);
   border-radius: 4px;margin:20px 0px"
   v-for="(col, index) in dynamicTableCol"
   :key="index"
>
   <el-table
      ref="allTable"
      :data="tableDataAll"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
   >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column property="gong" label="工单号" width="120">
         <template slot-scope="scope">
            <el-input
                clearable
                v-model="scope.row.gong"
                placeholder="请输入工单号"
            ></el-input>
         </template>
      </el-table-column>
      <el-table-column property="song" label="送修日期" width="120">
         <template slot-scope="scope">
            <el-input
                clearable
                v-model="scope.row.song"
                placeholder="请输入日期"
            ></el-input>
         </template>
      </el-table-column>
      <el-table-column property="che" label="车牌号" width="120">
         <template slot-scope="scope">
            <el-input
                clearable
                v-model="scope.row.che"
                placeholder="请输入车牌号"
            ></el-input>
         </template>
      </el-table-column>
      <el-table-column property="cheng" label="送修里程" width="120">
         <template slot-scope="scope">
            <el-input
                clearable
                v-model="scope.row.cheng"
                placeholder="请输入送修里程"
            ></el-input>
         </template>
      </el-table-column>
   </el-table>
   <el-table
      ref="jobTable"
      :data="tableDataJob"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
   >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column property="projecto" label="项目1" width="120">
          <template slot-scope="scope">
             <el-input
                 clearable
                 v-model="scope.row.projecto"
                 placeholder="请输入项目"
              ></el-input>
           </template>
      </el-table-column>
      <el-table-column property="nameo" label="维修项目1" width="120">
          <template slot-scope="scope">
             <el-input
                 clearable
                 v-model="scope.row.nameo"
                 placeholder="请输入维修项目"
              ></el-input>
           </template>
      </el-table-column>
      <el-table-column property="projectt" label="项目2" width="120">
           <template slot-scope="scope">
              <el-input
                  clearable
                  v-model="scope.row.projectt"
                  placeholder="请输入项目"
              ></el-input>
            </template>
       </el-table-column>
       <el-table-column property="namet" label="维修项目3" width="120">
            <template slot-scope="scope">
               <el-input
                  clearable
                  v-model="scope.row.namet"
                  placeholder="请输入维修项目"
               ></el-input>
            </template>
        </el-table-column>
   </el-table>
   <el-button icon="el-icon-plus" @click="addTableJob" type="primary">
　　　　添加项目信息
　　</el-button>
   <el-table
       ref="partsTable"
       :data="tableDataParts"
       highlight-current-row
       @current-change="handleCurrentChange"
       style="width: 100%"
   >
       <el-table-column type="index" width="50"> </el-table-column>
       <el-table-column property="partso" label="配件1" width="120">
           <template slot-scope="scope">
              <el-input
                  clearable
                  v-model="scope.row.partso"
                  placeholder="请输入配件"
              ></el-input>
           </template>
        </el-table-column>
        <el-table-column property="numo" label="配件数量1" width="120">
            <template slot-scope="scope">
               <el-input
                  clearable
                  v-model="scope.row.numo"
                  placeholder="请输入配件数量"
               ></el-input>
            </template>
        </el-table-column>
        <el-table-column property="partst" label="配件1" width="120">
            <template slot-scope="scope">
               <el-input
                  clearable
                  v-model="scope.row.partst"
                  placeholder="请输入配件"
               ></el-input>
            </template>
        </el-table-column>
        <el-table-column property="numt" label="配件数量1" width="120">
            <template slot-scope="scope">
               <el-input
                  clearable
                  v-model="scope.row.numt"
                  placeholder="请输入配件数量"
               ></el-input>
            </template>
        </el-table-column>
    </el-table>
    <el-button icon="el-icon-plus" @click="addTableParts" type="primary">
　　　　添加配件信息
　　</el-button>
　</div>
  <br />
<el-button icon="el-icon-plus" @click="addTableAll" type="primary">
　　添加维修记录信息
</el-button>
</div>


data(){
  return{
       objAll: {
        gong: "",
        song: "",
        che: "",
        cheng: ""
      },
      tableDataAll: [
        {
          gong: "",
          song: "",
          che: "",
          cheng: ""
        }
      ],
      objJob: {
        projecto: "",
        projectt: "",
        nameo: "",
        namet: ""
      },
      tableDataJob: [
        {
          projecto: "",
          projectt: "",
          nameo: "",
          namet: ""
        }
      ],
      objParts: {
        partso: "",
        numo: "",
        partst: "",
        numt: ""
      },
      tableDataParts: [
        {
          partso: "",
          numo: "",
          partst: "",
          numt: ""
        }
      ],
      currentRow: null,
      dynamicTableCol: [] 
    }  
},

methods:{
  // 添加全部记录
    addTableAll() {
      this.tableDataJob = [
        {
          projecto: "",
          projectt: "",
          nameo: "",
          namet: ""
        }
      ];
      this.tableDataParts = [
        {
          partso: "",
          numo: "",
          partst: "",
          numt: ""
        }
      ];
      this.dynamicTableCol.push(this.objAll);
    },
    // 添加-项目
    addTableJob() {
      this.tableDataJob.push(JSON.parse(JSON.stringify(this.objJob)));
    },
    // 添加-配件
    addTableParts() {
      this.tableDataParts.push(JSON.parse(JSON.stringify(this.objParts)));
    },

　　　handleCurrentChange(val) {

        this.currentRow = val;

     },

  
}