代码之家 › 专栏 › 技术社区 › Michael Wiles

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

syncfusion vuejs3 typescript

Michael Wiles · 技术社区 · 3 年前

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

到目前为止我有 this -虽然这似乎是为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); 我不能做那个工具提示。价值内容或工具提示。内容-它告诉我内容不存在。。。

我试着让:content属性指向一个方法,但这也不起作用。

我怀疑在vue 3中有更好的方法来做到这一点。。。

0 回复 | 直到 3 年前

Indhumathy 3 年前

您可以在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