可编辑的制表器表格单元中的自定义Vue组件

Question

通过制表器（https://tabulator.info/）寻找帮助。
我正在尝试使用Tabulator单元内的vue组件（来自Quasar）来编辑表数据，但无法正确处理。

我正在按照本文中的描述创建我的组件实例：https://css-tricks.com/creating-vue-js-component-instances-programmatically/，然后侦听来自这些组件的事件并通过调用制表器自己的success()方法（或{{1} }取消编辑）。

cancel()

现在，我面临的问题之一是，如果我当前正在编辑单元格而未调用Tabulator.prototype.extendModule('edit', 'editors', { customEditor(cell, onRendered, success, cancel, editorParams) { const colType = cell.getField() const ComponentClass = Vue.extend( self.compList.find(item => item.type.includes(colType)).comp ) const cellValue = cell.getValue() self.tableInputInstance = new ComponentClass({ propsData: { value: cellValue, indicator: false, autofocus: true, ...self.compList.find(item => item.type.includes(colType)).props } }).$mount() self.tableInputInstance.$on('input', e => onChange(e, 'input')) self.tableInputInstance.$on('change', e => onChange(e, 'change')) self.tableInputInstance.$on('blur', e => onChange(e, 'blur')) function onChange(e, evtType) { if (e !== cellValue) { success(e) } else { cancel() } } return self.tableInputInstance.$el } }) ，则无法单击另一个单元格使其可编辑/渲染输入组件，只有每秒单击的单元格变为可编辑状态。

我要拥有的行为完全类似于以下Tabulator演示中的行为：http://tabulator.info/docs/4.6/edit#edit，只是带有我自己的Vue输入组件。 我在这里使用当前设置放置了一个演示应用程序：https://codesandbox.io/s/tabulator-w-custom-inputs-4lr7k?file=/src/pages/Index.vue 将不胜感激有关解决此问题的任何想法！

Answer 1

之所以发生这种情况，是因为您在Vue解析DOM之后尝试使用Vue组件。

Vue会在首次加载DOM时查找组件标签，实例化每个组件并将其标签从组件定义内部转换为实际的HTML。

这仅在页面加载时发生，因此，当您使用格式化程序并传入组件时，您只是传入标准HTML并且该组件标记无效，因此不会触发其功能。

据我所知，页面加载后无法以这种方式实例化组件。（如果有人可以证明我对此有错，我将非常喜欢它）

因此，您要设置的任何格式化程序都需要使用原始JavaScript，而不是Vue组件