模板

<template>
    <div class="record">
        <el-table :data="tableData" style="width: 100%" align='center'>
            <el-table-column label="序號" align='center' >
                <template slot-scope="scope">
                    <div slot="reference" >
                        <p>{{ scope.row.sub_num }}</p>
                    </div>
                </template>
            </el-table-column>
             <!-- 調(diào)用接口數(shù)據(jù)的下拉菜單-->
            <el-table-column label="狀態(tài)" property="status" align='center'>
                <template slot-scope="scope">
                    <el-select v-model="form.status" size="medium">
                        <el-option label="" v-for="item in status_name"                              placeholder=''"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column><el-table-column label="內(nèi)容" property="content" align='center'>
                <template slot-scope="scope">
                    <div slot="reference" >
         <!-- @keyup.enter.native鍵盤事件：回車  -->
                        <el-input size="medium" v-model="scope.row.content" ref='content' @keyup.enter.native="add(scope.$index,scope.row)"></el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="人員" property="person" align='center'>
                <template slot-scope="scope">
                    <div slot="reference" >
                        <p>管理員</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="enter_data" label="日期" align='center'>
        </el-table-column>
            <el-table-column label="操作" align='center'>
              <template slot-scope="scope">
                     <!--  @click點(diǎn)擊事件  -->
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <div class="button">
            <el-button type="success">保存</el-button>
        </div>
    </div>
</div></template>

交互

    <script>
          調(diào)用接口
          import {searchServiceState} from '../../service'
          export default {
               name: 'Home',
               data() {
                 return {
                       tableData:[],
                       type:'"",
                       status_name:[]
                    }
              },
mounted() {
    this.type = this.$route.params.type
    searchServiceState({type:0,order_type:this.type==='main' ? 0:1}).then((res) =>{
        this.status_name= res.data.data.map(item => {
            console.log(item.name);
            return {value: item.name, label: item.name}
        })
    })
},
methods: {
    handleDelete(index, row) {
                console.log(row);
                    判斷當(dāng)前數(shù)據(jù)的長度大于1 && 當(dāng)前數(shù)據(jù)不是最后一條數(shù)據(jù)
        if(this.tableData.length > 1 && index != this.tableData.length-1){
                  this.tableData.splice(index, 1);
                };
       },
    回車后添加一條數(shù)據(jù)
    add:function(index, row){
        // console.log(this.tableData.length-1);
                    判斷如果是最后一條數(shù)據(jù)，則添加
        if(index == this.tableData.length-1){
            row.sub_num = "";
            this.tableData.push(
                {
                    sub_num:'輸入',
                    status: '',
                    content: '',
                    person: '',
                    enter_data: '',
                }
              )
            }           
          }
       }
    }
</script>