vxetable怎么在表单中实现点击按钮添加输入框

对于 vxetable，您可以使用 `vxe-form` 组件来实现在表单中点击按钮添加输入框的功能。您可以在表单中添加一个按钮，当用户点击该按钮时，您可以使用 `addField` 方法来添加一个新的表单项。

以下是一个简单的示例代码，用于实现在 `vxe-form` 中添加一个按钮，并在点击该按钮时添加一个新的输入框表单项：

<template>
  <div>
    <vxe-form ref="form" :model="model" :rules="rules">
      <vxe-form-item label="Name" prop="name">
        <input v-model="model.name" class="my-input" />
      </vxe-form-item>
      <vxe-form-item label="Age" prop="age">
        <input v-model="model.age" class="my-input" />
      </vxe-form-item>
      <vxe-form-item label="Extra Fields">
        <div>
          <div v-for="(field, index) in extraFields" :key="index">
            <vxe-form-item :label="'Field ' + (index + 1)" :prop="'extraFields.' + index">
              <input v-model="model.extraFields[index]" class="my-input" />
            </vxe-form-item>
            <vxe-button type="text" @click="removeExtraField(index)">Remove</vxe-button>
          </div>
          <vxe-button type="text" @click="addExtraField">Add Field</vxe-button>
        </div>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script>
import { VXETable, VxeForm, VxeFormItem, VxeButton } from 'vxe-table'

export default {
  components: {
    VxeForm,
    VxeFormItem,
    VxeButton,
  },
  data() {
    return {
      model: {
        name: '',
        age: '',
        extraFields: [],
      },
      rules: {
        name: [{ required: true, message: 'Name is required' }],
        age: [{ required: true, message: 'Age is required' }],
      },
      extraFields: [],
    }
  },
  methods: {
    addExtraField() {
      const field = `field-${this.extraFields.length}`
      this.extraFields.push(field)
      this.$refs.form.addField({
        field,
        title: `Field ${this.extraFields.length}`,
        rules: [{ required: true, message: `Field ${this.extraFields.length} is required` }],
        render: ({ model, field }) => {
          return <input v-model={model[field]} class="my-input" />
        },
      })
    },
    removeExtraField(index) {
      const field = this.extraFields[index]
      this.extraFields.splice(index, 1)
      this.$refs.form.removeField(field)
    },
  },
}
</script>

在这个例子中，我们创建了一个 `vxe-form`，并为其添加了两个输入框表单项和一个名为 `Extra Fields` 的表单项。在 `Extra Fields` 表单项中，我们使用 `v-for` 指令来渲染每个额外的输入框表单项，并为每个表单项添加了一个 `Remove` 按钮，用于删除该表单项。我们还添加了一个 `Add Field` 按钮，用于在表单中添加一个新的输入框表单项。

在 `addExtraField` 方法中，我们使用 `addField` 方法来添加一个新的表单项。我们在该方法中创建了一个新的表单项对象，包含一个唯一的 `field` 属性、一个标题和一个渲染函数。在该渲染函数中，我们使用 `v-model` 指令来绑定表单项的值到 `model` 对象中。最后，我们将新的 `field` 属性添加到 `extraFields` 数组中，以便在渲染表单时使用。

在 `removeExtraField` 方法中，我们使用 `removeField` 方法来删除一个表单项，并从 `extraFields` 数组中删除对应的 `field` 属性。