vxetable怎么实现点击按钮添加输入框

对于 vxetable，您可以使用特定的插槽来实现这个功能。具体地说，您可以使用 `vxe-toolbar` 的插槽来创建一个自定义的工具条，并在其中添加一个按钮。当用户点击该按钮时，您可以使用 `vxe-grid` 的 `addColumn` 方法来添加一个新的列。这个新的列可以是一个输入框或任何其他您需要的元素。

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

<template>
  <div>
    <vxe-grid
      ref="grid"
      :columns="columns"
      :data="data"
      :toolbar="toolbar"
      @toolbar-button-click="handleToolbarButtonClick"
    ></vxe-grid>
  </div>
</template>

<script>
import { VXETable, VxeGrid, VxeToolbar } from 'vxe-table'

export default {
  components: {
    VxeGrid,
    VxeToolbar,
  },
  data() {
    return {
      columns: [
        { field: 'name', title: 'Name' },
        { field: 'age', title: 'Age' },
      ],
      data: [
        { name: 'John Doe', age: 30 },
        { name: 'Jane Doe', age: 25 },
      ],
      toolbar: {
        slots: {
          buttons: () => {
            return [
              {
                name: 'add-input',
                type: 'button',
                icon: 'mdi-plus',
                tip: 'Add Input',
              },
            ]
          },
        },
      },
    }
  },
  methods: {
    handleToolbarButtonClick(params) {
      if (params.name === 'add-input') {
        this.$refs.grid.addColumn({
          field: `input-${this.columns.length}`,
          title: `Input ${this.columns.length}`,
          editRender: {
            name: 'MyInput',
          },
        })
      }
    },
  },
  mounted() {
    VXETable.renderer.add('MyInput', {
      renderEdit(h, renderOpts, { row }) {
        return <input class="my-input" value={row[renderOpts.name]} />
      },
    })
  },
}
</script>

在这个例子中，我们创建了一个 `vxe-grid`，并为其添加了一个自定义的工具条。在该工具条中，我们添加了一个名为 `add-input` 的按钮，并在用户点击该按钮时触发 `handleToolbarButtonClick` 方法。在该方法中，我们使用 `addColumn` 方法来添加一个新的列，该列包含一个名为 `MyInput` 的自定义渲染器。最后，我们在 `mounted` 钩子函数中注册了名为 `MyInput` 的自定义渲染器，用于渲染新添加的列。