Vue2 中使用 Handsontable 渲染 Ant Design Button 并添加点击事件

在 Vue2 中使用 handsontable 时，可以通过自定义渲染器 (renderer) 来让一列渲染为 Ant Design 的 Button。在 Button 的点击事件中，可以通过 console.log() 方法打印出 '111'。

首先，需要安装 Ant Design 和 handsontable 的相关依赖：

npm install ant-design-vue handsontable --save

然后，在 Vue 组件中引入相关的模块：

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

export default {
  components: {
    Button,
    Handsontable: HandsontableVue,
  },
  // ...
}

接下来，定义一个自定义的渲染器 (renderer)：

const buttonRenderer = (instance, td, row, col, prop, value, cellProperties) => {
  // 创建一个 Button 组件
  const button = new Vue({
    render: h => h(Button, {
      on: {
        click: () => {
          console.log('111');
        },
      },
    }, value),
  }).$mount();

  // 将 Button 组件添加到当前单元格中
  td.appendChild(button.$el);
};

最后，在 Handsontable 的配置项中，将自定义渲染器应用到特定列中：

const hotSettings = {
  // ...
  columns: [
    // ...
    {
      // 列的数据源
      data: 'buttonColumn',
      // 使用自定义渲染器
      renderer: buttonRenderer,
    },
    // ...
  ],
  // ...
};

这样，当 handsontable 中的这一列渲染为 Ant Design 的 Button 后，点击 Button 会在控制台中打印出 '111'。