elementui中uitable新增数据时直接在table内部增加填写

element-ui中的`<el-table>`组件可以使用插槽（slot）来实现在表格内部新增数据的功能。你可以在`<el-table>`中定义一个`<template>`标签，并使用`<el-form>`组件来创建表单，然后在表格中使用`<el-table-column>`来渲染表单中的每个字段。当用户填写完表单并点击保存按钮时，你可以将表单数据添加到表格数据中。

以下是一个示例代码：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="gender" label="Gender"></el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button @click="editRow(scope.row)">Edit</el-button>
          <el-button @click="deleteRow(scope.$index)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible">
      <el-form :model="form" label-width="80px">
        <el-form-item label="Name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="Age">
          <el-input v-model.number="form.age"></el-input>
        </el-form-item>
        <el-form-item label="Gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="Male">Male</el-radio>
            <el-radio label="Female">Female</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="saveRow">Save</el-button>
      </div>
    </el-dialog>

    <el-button type="primary" @click="addRow">Add Row</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John Doe', age: 25, gender: 'Male' },
        { name: 'Jane Doe', age: 30, gender: 'Female' },
      ],
      dialogVisible: false,
      form: {
        name: '',
        age: '',
        gender: '',
      },
      rowIndex: null,
    };
  },
  methods: {
    addRow() {
      this.rowIndex = null;
      this.dialogVisible = true;
      this.form = {
        name: '',
        age: '',
        gender: '',
      };
    },
    editRow(row) {
      this.rowIndex = this.tableData.indexOf(row);
      this.dialogVisible = true;
      this.form = Object.assign({}, row);
    },
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
    saveRow() {
      if (this.rowIndex !== null) {
        Object.assign(this.tableData[this.rowIndex], this.form);
      } else {
        this.tableData.push(this.form);
      }
      this.dialogVisible = false;
    },
  },
};
</script>

在这个示例中，我们使用了一个对话框（dialog）来显示表单。当用户点击“Add Row”按钮时，我们打开对话框并清空表单数据。当用户点击表格中的“Edit”按钮时，我们将表格行的数据复制到表单中并打开对话框。当用户保存表单时，我们将表单数据添加到表格数据中。