element UI 动态表格

<template>
    <div>
        <div>
            <el-button type="text" size="medium" icon="el-icon-plus" @click="addLine">
                新建
            </el-button>
            <el-button type="text" size="medium" icon="el-icon-minus"@click="deleteLine">
                删除
             </el-button>
        </div>
        // 表格
        <div>
            <el-table border ref="multipleTestTable" 
                :data="addrequestTypezlList"
                max-height="500" style="width: 100%">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="requestBh" label="编号/图号">
                     <template slot-scope="scope">
                           <el-input v-model='scope.row.requestBh'></el-input>
                     </template>
                </el-table-column>
                <el-table-column prop="requestName" label="名称">
                      <template slot-scope="scope">
                           <el-input v-model='scope.row.requestName'></el-input>
                       </template>
                </el-table-column>
                <el-table-column prop="requestBc" label="版次">
                       <template slot-scope="scope">
                            <el-input v-model='scope.row.requestBc'></el-input>
                       </template>
                </el-table-column>
                <el-table-column prop="requestrq" label="日期">
                       <template slot-scope="scope">
                          <el-date-picker v-model='scope.row.requestrq'                                                                                      
                                      type="datetime" value-format="yyyy/MM/dd hh:mm:ss"
                                      placeholder="日期">
                           </el-date-picker>
                       </template>
                </el-table-column>
                <el-table-column prop="requestcgddbh" label="采购订单编号">
                       <template slot-scope="scope">
                            <el-input v-model='scope.row.requestcgddbh'></el-input>
                        </template>
                </el-table-column>
                <el-table-column prop="requestcgrq" label="采购日期">
                        <template slot-scope="scope">
                             <el-date-picker v-model='scope.row.requestcgrq' 
                                       type="datetime" value-format="yyyy/MM/dd hh:mm:ss"
                                       placeholder="采购日期">
                             </el-date-picker>
                        </template>
                </el-table-column>
            </el-table>
       </div>
   </div>
</template>

export default {
    data() {
        return {
            addrequestTypezlList:[]
        }

    },
     methods: {
         addLine() {
            let newValue = {
              requestBh: "",
              requestName: '',
              requestBc: '',
              requestrq: "",
              requestcgddbh: "",
              requestcgrq: "",
            };
            this.addrequestTypezlList =             
                   JSON.parse(JSON.stringify(this.$refs.multipleTestTable.data));
            this.addrequestTypezlList.push(newValue);
        },

        deleteLine() {
            let dataSelects = [];
            dataSelects = this.$refs.multipleTestTable.selection;
            if (dataSelects.length == 0) {
                  this.$message.warning('请勾选你要删除的数据');
                  return;
            }
            let tableData = this.addrequestTypezlList;
            let length = this.addrequestTypezlList.length;
            this.removeData(dataSelects, tableData, length);
        },
        
        removeData(dataSelects, tableData, length) {
        let datas = [];
        for (let i = 0; i < length; i++) {
          let zt = true;
          for (let j = 0; j < dataSelects.length; j++)
            if (tableData[i] == dataSelects[j]) {
              zt = false;
              continue;
            }
          if (zt) {
            datas.push(tableData[i]);
          }
        }
       
        this.addrequestTypezlList = datas;
        

      },
             

      },
        
     }

}