Vue element-ui <el-table-column>格式化程序–如何显示html？

debugcn 发表于 Dev

丹尼尔

如何返回html格式的单元格值？

我想使用获取自定义格式的值（带有html或其他组件）<el-table-column> formatter。

<el-table :data="data">
  <el-table-column v-for="(column, index) in columns" 
                   :key="index" :label="column.label" 
                   :formatter="column.formatter">
  </el-table-column>
</el-table>

data() {
  return {
    columns: [
      {
        label: 'Created at',
        formatter: (row, col, value, index) => {
          return `<span class="date">${value}</span>`
        }
      },
      // edit:
      {
        label: 'Address',
        formatter: (row, col, value, index) => {
          return `<mini-map :data="${row}"></mini-map>`
        }
      }
      // other dynamic columns...
    ]
  }
}

但是单元格内容显示为转义的html字符串。是否有可能强制使用html？

史诗编辑：我添加了一个答案与解决方案。

丹尼尔

好的，经过几个小时的集思广益，我找到了一个不错的解决方案。我将它们放在这里供其他人使用-希望对您有所帮助。

自定义列中显示的值可以是：

简单字符串（prop）
格式化的字符串（通过原始格式化程序，是安全的，没有任何html或组件）
自定义值（html，组件，也很安全！）

为了实现这一点，我必须创建自定义格式器组件，并将其放在文件夹中，即/ TableFormatters /

为此，有一个简单的功能组件DatetimeFormatter用图标显示日期时间。

TableFormatters / DatetimeFormatter.vue

<template functional>
  <span>
    <i class="icon-date"></i> {{ props.row[props.column] }}
  </span>
</template>

<script>
  export default {
    name: 'DatetimeFormatter',
  }
</script>

这是列的配置：

import DatetimeFormatter from './TableFormatters/DatetimeFormatter'
// ...
data() {
  return {
    data: [/*...*/],
    columns: [
      name: {
        label: 'Name',
      },
      state: {
        label: 'State',
        formatter: row => {
            return 'State: '+row.state__label
        }
      },
      created_at: {
        label: 'Created at',
        formatter: DatetimeFormatter
      }
    ]
  }
}

现在是时候定义<el-table>：

<el-table :data="data">
  <el-table-column 
    v-for="(column, index) in columns" 
    :key="index" 
    :label="columns[column] ? columns[column].label : column"
    :prop="column"
    :formatter="typeof columns[column].formatter === 'function' ? columns[column].formatter : null">
    <template #default="{row}" v-if="typeof columns[column].formatter !== 'function'">
      <div v-if="columns[column].formatter"
        :is="columns[column].formatter" 
        :row="row" 
        :column="column">
      </div>
      <template v-else>
        {{ row[column] }}
      </template>
    </template>
  </el-table-column>
</el-table>

这就像一个魅力。格式化程序在做什么？首先，我们检查格式化程序是否设置为function。如果是这样，则本机<el-table-column>格式化程序将控制该控件，因为<template #default={row}>不会被创建。否则，将创建格式化程序组件（通过:is属性）。但是，它没有格式化程序，将显示一行的纯值。