el-table 序号 姓名 班级 默认一个空行 可以填写，当填写完确认后自动新增一个空行 不用按钮点击 填写完班级后 enter确认 新增

在Vue.js的Element UI库中，`el-table`组件可以用于创建表格，并实现类似的功能。要实现在表头固定、默认显示一个空行并且允许用户输入并按Enter键自动新增一行的需求，你可以这样做：

1. 首先，在HTML结构上，设置一个`el-table`元素，包含`<el-table-column>`子元素，分别对应序号、姓名、班级列，以及一个特殊的“新增”列：

<template>
  <div>
    <el-table :data="rows" style="width: 100%">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="class" label="班级">
        <template slot-scope="scope">
          <input v-model="scope.row.class" @keyup.enter="addRow" />
        </template>
      </el-table-column>
      <!-- "新增"列 -->
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button size="mini" @click="addRow">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

2. 接下来，在`script`部分，设置数据`rows`数组初始化一个空的对象作为第一个表行，并定义`addRow`函数来处理新增操作：

<script>
export default {
  data() {
    return {
      rows: [{ name: '', class: '' }, {}], // 第一行是空行
    };
  },
  methods: {
    addRow() {
      if (this.rows[this.rows.length - 1].class === '') {
        this.rows.push({ name: '', class: '' }); // 如果最后一行为空，添加新的空行
      } else {
        this.rows.push({}); // 否则添加新行
      }
    },
  },
};
</script>

3. 这样，当你在“班级”列输入内容并按下Enter键，或者点击“添加”按钮时，都会触发`addRow`方法，动态地在表格底部添加一个新的空行。