如何根据单元格中的值向Vue 3上的Syncfusion网格中的单元格添加工具提示

Question

我需要添加一些额外的信息(包含在数据源中(，作为syncfusion中GridComponent中每个单元格上方的工具提示。

到目前为止，我有这个-尽管这似乎是为Vue 2…

<ejs-tooltip ref="tooltip" target=".e-rowcell" :beforeRender="beforeRender">
<ejs-grid ref="grid" :dataSource="data" height="315px">
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
<e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="90"></e-column>
<e-column field="ShipName" headerText="Ship Name" width="120"></e-column>
</e-columns>
</ejs-grid>
</ejs-tooltip>

然后是beforeRender方法：

beforeRender: function (args) {
if (args.target.closest("td")) {
this.$refs.tooltip.content = args.target.innerText;
}
}

这不起作用($refs是vue 2的东西，对吧？(。。。

因此，如果我将vue3引用添加到工具提示：const tooltip = ref<TooltipComponent>(null);，我无法执行tooltip.value.content或tooltip.content-它告诉我内容不存在。。。

我尝试使：content属性指向一个方法，但也不起作用。

我怀疑在vue 3中有更好的方法…

Answer 1

您可以获得Tooltip组件引用，如下面Vue 3中的代码片段所示。

beforeRender: function (args) {
if (args.target.closest("td")) {
this.$refs.tooltip.ej2Instances.content = args.target.innerText;
}
},

参考样品：https://codesandbox.io/s/vue-3-tooltip-37v1q?file=/src/App.vue