Vue2 中使用 Handsontable 渲染 Ant Design 按钮并触发事件

在 Vue2 中使用 Handsontable 时，可以通过自定义渲染器 (renderer) 将一列渲染为 Ant Design 的 Button。以下是一个示例代码：

1. 首先，安装 Ant Design 和 Handsontable 依赖：

npm install ant-design-vue handsontable

2. 在 Vue 组件中导入所需的库：

import { Button } from 'ant-design-vue';
import Handsontable from 'handsontable';

3. 在 Vue 组件中定义 Handsontable 的列配置和数据：

data() {
  return {
    hotSettings: {
      data: [
        ['John', 'Doe', ''],
        ['Jane', 'Smith', ''],
        ['Bob', 'Johnson', '']
      ],
      colHeaders: ['First Name', 'Last Name', 'Action'],
      columns: [
        {},
        {},
        {
          renderer: function(instance, td, row, col, prop, value, cellProperties) {
            Handsontable.renderers.TextRenderer.apply(this, arguments);
            td.innerHTML = `
              <a-button type='primary' @click='handleButtonClick'>Button</a-button>
            `;
          }
        }
      ]
    }
  }
},

4. 在 Vue 组件的 methods 中定义按钮点击事件处理函数：

methods: {
  handleButtonClick() {
    console.log('111');
  }
}

5. 在 Vue 组件的模板中使用 Handsontable 和 Ant Design 的 Button 组件：

<template>
  <div>
    <hot-table :settings='hotSettings'></hot-table>
  </div>
</template>

6. 最后，在 Vue 组件的 components 中注册 Ant Design 的 Button 组件和 Handsontable 的 HotTable 组件：

components: {
  'a-button': Button,
  'hot-table': Handsontable.vue.HotTable
}

这样就可以在 Handsontable 的某一列中渲染 Ant Design 的 Button 组件，并在点击按钮时打印出 '111'。