本章节将介绍如何把单元格的值和Vue集成。
如果仅用于显示
在data上定义一个普通属性，重写setValueToElement方法，在setValueToElement设置这个属性即可。
class MyPluginCellType extends Forguncy.Plugin.CellTypeBase {
createContent() {
this.content = $("<div/>");
return this.content;
}
onPageLoaded() {
const uid = "uid-" + new Date().valueOf();
const self = this;
this.content.attr("id", uid);
const option = {
template:
`<button>{{text}}</button>`,
data() {
return {
text: ""
}
}
};
option.beforeCreate = function () {
self.vue = this;
};
this.vueApp = Vue.createApp(option);
this.vueApp.mount(`#${uid}`);
}
setValueToElement(_, value) {
this.vue.text = value?.toString();
}
}
Forguncy.Plugin.CellTypeHelper.registerCellType("MyPlugin.MyPluginCellType, MyPlugin", MyPluginCellType);
双向绑定实现编辑
VUE 支持通过 v-model 双向绑定受控组件（通常是表单控件），对于此类组件，可以实现对单元格值的编辑。代码如下：
class MyPluginCellType extends Forguncy.Plugin.CellTypeBase {
createContent() {
this.content = $("<div/>");
return this.content;
}
onPageLoaded() {
const uid = "uid-" + new Date().valueOf();
const self = this;
this.content.attr("id", uid);
const option = {
template:
`<input v-model="text" @change="handleChange">`,
data() {
return {
text: ""
}
},
methods: {
handleChange() {
self.commitValue();
}
}
};
option.beforeCreate = function () {
self.vue = this;
};
this.vueApp = Vue.createApp(option);
this.vueApp.mount(`#${uid}`);
}
setValueToElement(_, value) {
this.vue.text = value?.toString();
}
getValueFromElement() {
return this.vue.text;
}
}
Forguncy.Plugin.CellTypeHelper.registerCellType("MyPlugin.MyPluginCellType, MyPlugin", MyPluginCellType);