Vue 集成单元格值

本章节将介绍如何把单元格的值和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);