我在尝试显示Vue.js表组件中'anhaenge'列的'renderHtml'值而不是'field'值时遇到了一个问题。尽管设置了列定义和RenderHtml组件，我仍然在表中显示'field'值。
下面是相关代码：
涉及的组件：

1. vue：为数据数组中的每一项呈现HTML。
   RenderHtml.vue:

<template>
        <div>
          <ul>
            <li v-for="anhang in data" :key="anhang.id">
              <span class="fa-li">
                <i
                  aria-hidden="true"
                  :class="'mdi mdi-' + iconForFilename(anhang.filename ?? '')"
                ></i>
              </span>
              <a
                :href="anhangUrl(anhang)"
                :title="encodeURIComponent(anhang.displayName)"
                target="_blank"
              >{{ anhang.bemerkung ? anhang.bemerkung : encodeURIComponent(anhang.displayName) }}</a>
            </li>
          </ul>
        </div>
      </template>
      
      <script setup lang="ts">
      import { IntranetPortalAnhang } from "@/data/IntranetPortalData"
      import { iconForFilename } from "@/transforms/IconTransform"
      
      const isIE11 = "MSInputMethodContext" in window && "documentMode" in document
      const anhangUrlFix = isIE11 && window.location.protocol === "file:"
      defineProps({
        data: {
          type: Array as () => Array<IntranetPortalAnhang>, 
          required: true,
        },
      })
      
      const anhangUrl = (anhang: IntranetPortalAnhang):string=> {
        return anhang.filename
          ? `./doc/${anhangUrlFix ? anhang.filename : encodeURIComponent(anhang.filename)}`
          : anhang.url
      }     
      </script>

字符串
2.columns.ts：定义列结构，包括具有“field”和“renderHtml”属性的“anhaenge”列。
columns.ts:

const anhaengeColumn = {
      label: "locationView.intranetView.attachments",
      field: (row: RowWithAnhang) => row.anhaenge.map((anhang) => anhang.displayName + ", " + anhang.bemerkung).join(", "),
      renderHtml: (row: RowWithAnhang) => {
        return {
          component: RenderHtml,      
          props: {
            data: row.anhaenge,
          },
        };
      },
      showForGroupParent: true,
      showForGroupChildren: true,
      sortable: false,
      whiteSpace: "normal",
      overflow: "ellipses",
      minWidth: 400,
      maxWidth: 500,
    };
    const columns = {
      gefStoffAnhaenge: anhaengeColumn, ....}
    
    export const columnDefinitions: Record<ColumnType, ColumnDefinition> = reduce(
      columns,
      (obj, column, columnName) => {
        const columnDefinition: ColumnDefinition = {
          align: "left",
          contentAlign: "left",
          sortable: true,
          ...column,      
          id: columnName,
          name: columnName,
              value: (item: any) => {
    if (item.gefStoff) {
      if ("renderHtml" in column && column.renderHtml) {
        const renderedValue = column.renderHtml(item);
        if (typeof renderedValue === 'string' || typeof renderedValue === 'number') {
          return renderedValue;
        }
        return undefined; 
      } else if ("field" in column && column.field) {
        const fieldValue = column.field(item)
        if (fieldValue === null) {
          return undefined
        }
        return fieldValue
      }
    }
    return undefined
  },
        }
        obj[columnName] = columnDefinition
        return obj
      },
      {} as any,
    )

型
3.table.vue：使用g-table组件来显示数据，尝试呈现'renderHtml'内容。

<template>
        <v-table
        id="table"
        :headers="columns"
        :items="data"
        :filterable="showFilterUse"
        :filter-method="filterMethod"
        :sort-by="customSort"
        fixed-first-column
        pagination 
        grouped="grouped ? 'grouped-table' : undefined"
      >
      <template #[`item.gefStoffAnhaenge`]="{item}">
         <RenderHtml :data="item.gefStoffAnhaenge.renderedHtml" />
      </template>
      </v-table>
    </template>

型

要点：

1.在RenderHtml.vue中，我迭代“data”数组，并根据每个“anhang”对象的某些属性呈现特定的HTML内容。
1.“columns.ts”文件定义了带有“field”和“renderHtml”属性的“anhaenge”列，目的是显示呈现的HTML内容。
1.在table.vue中，模板被设置为对'gefStoffAnhaenge'列使用'RenderHtml'组件。

问题：

• 尽管在列定义中设置了“renderHtml”属性，并将“renderedHtml”数据传递给表模板中的“RenderHtml”组件，但表仍显示“field”值，而不是预期的“renderHtml”内容。