怎么使用Vue解决动态挂载

{{firstName}} {{lastName}} aka {{alias}}

按照SpreadJS自定义单元格示例创建AutoCompleteCellType，并设置到单元格中：

function AutoComplateCellType() {
}
AutoComplateCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
AutoComplateCellType.prototype.createEditorElement = function (context, cellWrapperElement) {
//   cellWrapperElement.setAttribute("gcUIElement", "gcEditingInput");
  cellWrapperElement.style.overflow = 'visible'
  let editorContext = document.createElement("div")
  editorContext.setAttribute("gcUIElement", "gcEditingInput");
  let editor = document.createElement("div");
  // 自定义单元格中editorContext作为容器，需要在创建一个child用于挂载，不能直接挂载到editorContext上
  editorContext.appendChild(editor);
  return editorContext;
}
AutoComplateCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
    let width = cellRect.width > 180 ? cellRect.width : 180;
    if (editorContext) {
      // 创建构造器
      var Profile = Vue.extend({
        template: '
{{firstName}} {{lastName}} aka {{alias}}
',
        data: function () {
          return {
            firstName: 'Walter',
            lastName: 'White',
            alias: 'Heisenberg'
          }
        }
      })
      // 创建 Profile 实例，并挂载到一个元素上。
      new Profile().$mount(editorContext.firstChild);
    }
};

运行，双击进入编辑状态，结果却发现报错了

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

根据报错提示，此时候我们有两种解决办法：

• 开启runtimeCompiler，在vue.config.js中加入runtimeCompiler: true的配置，允许运行时编译，这样可以动态生成template，满足动态组件的需求

• 提前编译模板仅动态挂载，autocomplete的组件是确定的，我们可以使用这种方法

新建AutoComplete.vue组件用于动态挂载，这样可以挂载编译好的组件。

 
 
import AutoComplate from './AutoComplate.vue'
 
 
AutoComplateCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
    let width = cellRect.width > 180 ? cellRect.width : 180;
    if (editorContext) {
      // 创建构造器
      var Profile = Vue.extend(AutoComplate);
      // 创建 Profile 实例，并挂载到一个元素上。
      new Profile().$mount(editorContext.firstChild);
    }
};

双击进入编辑状态，看到组件中的内容

下一步，对于自定义单元格还需要设置和获取组件中的编辑内容，这时通过给组件添加props，同时在挂载时创建的VueComponent实例上直接获取到所有props内容，对应操作即可实现数据获取设置。

更新AutoComplate.vue，添加props，增加input用于编辑

通过this.vm存储VueComponent实例，在getEditorValue 和setEditorValue 方法中获取和给VUE组件设置Value。编辑结束，通过调用$destroy()方法销毁动态创建的组件。

AutoComplateCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
    let width = cellRect.width > 180 ? cellRect.width : 180;
    if (editorContext) {
      // 创建构造器
      var Profile = Vue.extend(MyInput);
      // 创建 Profile 实例，并挂载到一个元素上。
      this.vm = new Profile().$mount(editorContext.firstChild);
    }
};
 
AutoComplateCellType.prototype.getEditorValue = function (editorContext) {
    // 设置组件默认值
    if (this.vm) {
        return this.vm.value;
    }
};
AutoComplateCellType.prototype.setEditorValue = function (editorContext, value) {
    // 获取组件编辑后的值
    if (editorContext) {
      this.vm.value = value;
    }
};
AutoComplateCellType.prototype.deactivateEditor = function (editorContext, context) {
    // 销毁组件
    this.vm.$destroy();
    this.vm = undefined;
};

整个流程跑通了，下来只需要在AutoComplate.vue中，将input替换成ElementUI 的el- autocomplete并实现对应方法就好了。

结果

让我们看看效果吧。

以上就是“怎么使用Vue解决动态挂载”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。