Vue+ElementUI项目笔记（三、ElementUI表格）

模板

<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>
             <!-- 调用接口数据的下拉菜单-->
            <el-table-column label="状态" 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="内容" 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点击事件  -->
                <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>
          调用接口
          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);
                    判断当前数据的长度大于1 && 当前数据不是最后一条数据
        if(this.tableData.length > 1 && index != this.tableData.length-1){
                  this.tableData.splice(index, 1);
                };
       },
    回车后添加一条数据
    add:function(index, row){
        // console.log(this.tableData.length-1);
                    判断如果是最后一条数据，则添加
        if(index == this.tableData.length-1){
            row.sub_num = "";
            this.tableData.push(
                {
                    sub_num:'输入',
                    status: '',
                    content: '',
                    person: '',
                    enter_data: '',
                }
              )
            }           
          }
       }
    }
</script>