在vue中使用handsontable，实现自定义按钮并触发事件

河畔的金桔

已于 2023-07-12 17:27:18 修改

阅读量647

点赞数 1

文章标签： vue.js

于 2023-07-12 16:50:05 首次发布

本文链接：https://blog.csdn.net/qq_40834427/article/details/131685386

版权

在项目里摸爬滚打的时候遇到个奇怪的实现。首先项目用的是6.2.0版本的handsontable。需求是希望在表格列里面加按钮。照着原来的代码抄的时候看到这个$page死活不能理解。

<template>
  <hot-table :settings="settings"></hot-table>
</template>

<script>
import { HotTable } from '@handsontable/vue'
export default {
  components: { HotTable },
  data() {
    return {
      settings: {
        licenseKey: 'non-commercial-and-evaluation',
        columns: [
          { title: '年份', data: 'year' },
          { title: '老王', data: 'laowang' },
          { title: '老李', data: 'laoli' },
          {
            title: '老赵',
            data: 'laozhao',
            renderer: this.renderButtons
          },
        ],
        data: [
          { year: '2021', laowang: '22', laoli: '23', laozhao: '24' },
          { year: '2022', laowang: '23', laoli: '24', laozhao: '25' },
          { year: '2023', laowang: '24', laoli: '25', laozhao: '26' },
          { year: '2024', laowang: '25', laoli: '26', laozhao: '27' },
        ]
      }
    }
  },

  methods: {
    renderButtons(instance, td, row, col, prop, value) {
      td.innerHTML = `<button οnclick='$page.showProps(${value})'>${value}</button>`;
    },

    showProps(value) {
      console.log(value);
    }
  },
}
</script>

<style scoped></style>

说来奇怪，还真能跑。但是我自己新建项目抄一遍就报错。显然是前端大哥在某个地方塞东西了但是我没找到

renderButtons(instance, td, row, col, prop, value) {
      td.innerHTML = `<button οnclick='$page.showProps(${value})'>${value}</button>`;
},

由于项目封装了自定义的组件一时半会不知道怎么实现的。最后忽然想开了试着自己新建了一个vue项目加了点代码还真就成了。（其实就是往window里面塞东西）

 mounted() {
    window.$page = this;
    window.$page.showProps = this.showProps;
  },

  beforeDestroy() {
    Reflect.deleteProperty(window, $page);
  }