element ui 表格显示数据的下方设置添加输入框和按钮

如果您想在Element UI表格的下方添加输入框和按钮，并且点击按钮后将输入框的值添加到表格中，可以按照以下步骤进行操作：

1. 在Vue组件的template中，添加一个包含输入框和按钮的区域。使用`v-model`指令绑定输入框的值到Vue组件中的数据属性。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <!-- 表格列定义 -->
    </el-table>

    <div class="input-wrapper">
      <el-input v-model="newItem" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="addItem">添加</el-button>
    </div>
  </div>
</template>

2. 在Vue组件的script中，定义`tableData`数组用于存储表格数据，以及`newItem`变量用于绑定输入框的值。

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据数组
      newItem: '' // 输入框的值
    };
  },
  methods: {
    addItem() {
      // 将输入框的值添加到表格数据数组中
      this.tableData.push(this.newItem);
      // 清空输入框的值
      this.newItem = '';
    }
  }
};
</script>

3. 在CSS中，为输入框和按钮的父元素添加样式，使其位于表格下方。

<style>
  .input-wrapper {
    margin-top: 10px; /* 调整与表格的间距 */
  }
</style>

这样，当您在输入框中输入内容并点击添加按钮时，输入框的值将被添加到表格数据数组中，并在表格中显示出来。请根据您的实际需求进行必要的调整和修改。