使用vue生成一个后台传来纵列表格 用户可以输入 最后生成按钮 获取用户输入的数据

以下是一个简单的示例代码，实现了一个带有输入框和生成按钮的表格，用户可以输入数据并点击生成按钮来显示输入的数据：

<template>
  <div>
    <div class="input-container">
      <label>输入数据：</label>
      <input type="text" v-model="inputData" />
      <button @click="generateTable">生成</button>
    </div>
    <table v-if="tableData.length > 0">
      <thead>
        <tr>
          <th>序号</th>
          <th>数据</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputData: "",
      tableData: []
    };
  },
  methods: {
    generateTable() {
      // 将输入的数据按空格分割成数组
      const data = this.inputData.trim().split(/\s+/);
      // 更新表格数据
      this.tableData = data;
    }
  }
};
</script>

<style>
.input-container {
  margin-bottom: 20px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}
</style>

在这个示例中，我们首先定义了一个包含一个输入框和一个生成按钮的表单。当用户点击生成按钮时，我们将输入的数据按空格分割成一个数组，并将其赋值给表格数据，然后使用 v-for 指令将表格数据渲染到表格中。如果表格数据为空，则不显示表格。

需要注意的是，这个示例中的代码只是一个简单的示例，并没有对用户输入的数据进行安全性检查和验证，请在实际开发中根据具体情况进行处理