在项目里摸爬滚打的时候遇到个奇怪的实现。首先项目用的是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);
}
这样写之后就能正常跑代码了