如何用VUE在table表格中使用input输入框

在Vue中，要在表格 (`table`) 中使用 `input` 输入框，你通常会结合模板语法 `v-model` 和组件化思想，例如使用 `<el-input>` 或 `<input>` 自己构建。这里以 `element-ui` 的 `el-table` 和 `el-form` 为例，展示基本步骤：

首先，安装 Element UI 并引入所需组件：

npm install element-ui@latest
// 或者
yarn add element-ui

然后在模板中设置:

<template>
  <div>
    <el-form ref="form">
      <el-table :data="tableData">
        <el-table-column prop="label" label="标签"></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-form-item :label="scope.$index + 1 + '. 输入项'">
              <el-input v-model="scope.row.inputValue"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

接下来，在 `data` 和 `methods` 部分配置数据和事件处理：

<script>
import { ElTable, ElForm, ElFormItem, Input } from 'element-ui';

export default {
  components: {
    ElTable,
    ElForm,
    ElFormItem,
    Input
  },
  data() {
    return {
      tableData: [
        { label: '行1', inputValue: '' },
        { label: '行2', inputValue: '' },
        // 添加更多行...
      ],
    };
  },
  methods: {
    handleSubmit() {
      // 提交表单逻辑，比如保存数据到后台
    },
  },
};
</script>

以上代码中，`v-model` 将输入框的值绑定到了表格数据的 `inputValue` 属性上，当用户填写内容时，数据会自动更新。