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

在项目里摸爬滚打的时候遇到个奇怪的实现。首先项目用的是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);
  }

这样写之后就能正常跑代码了

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值