在 Vue.js 表组件中显示“renderHtml”内容而不是“field”值时出现问题

问：

我在尝试在我的 Vue.js 表组件中显示“anhaenge”列的“renderHtml”值而不是“field”值时遇到了问题。尽管设置了列定义和 RenderHtml 组件，我仍然在表中显示“字段”值。

下面是相关代码：

涉及的组件：

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

渲染Html.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)"
               
              >{{ 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 内容。

2. “columns.ts”文件使用“field”和“renderHtml”属性定义“anhaenge”列，旨在显示呈现的 HTML 内容。

3. 在 table.vue 中，模板设置为对 'gefStoffAnhaenge' 列使用 'RenderHtml' 组件。

问题：

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