Vue element-ui <el-table-column> formatter – 如何显示html？

Question

如何return html格式化单元格值？

我想通过 <el-table-column> formatter.

获取自定义格式的值（使用 html 或其他组件）

<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？

EPIC 编辑： 我添加了一个答案和一个解决方案。

Answer 1

使用模板槽范围添加 html 格式化列

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
<el-table :data="tblData">
  <el-table-column prop="title"></el-table-column>
  <el-table-column prop="text">
    <template scope="scope">
      <span style="color:red;">{{scope.row.text}}</span>
    </template>
  </el-table-column>
</el-table>
</template>
</div>

var Main = {
  data() {
    return {
                tblData           : [
                    {title: 'title1', text:'text1'},
                    {title: 'title2', text:'text2'},
                    {title: 'title3', text:'text3'},
                ],
            }
  },
  methods : {

  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Answer 2

如果您想为 <el-table-column> 呈现自定义 HTML，您将需要使用 custom column template 功能，而不是 :formatter 属性。它看起来像这样：

<el-table :data="data">
  <el-table-column
    v-for="(column, index) in columns" 
    :key="index"
    :label="column.label"
  >
    <template slot-scope="scope">
      <span class="date">{{ scope.row.value }}</span>
    </template>
  </el-table-column>
</el-table>

在一般情况下，如果您需要呈现未转义的 HTML，则可以使用 v-html 指令。这涉及到一些安全隐患，因此请确保在获取 v-html 之前了解这些内容。

从本质上讲，它可以归结为：从不使用v-html 呈现用户提供的内容。

Answer 3

好的，经过几个小时的集思广益，我找到了非常好的解决方案。我把它放在这里是为了其他人 - 我希望这对某人有所帮助。

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

简单字符串（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 属性）。但是，如果没有格式化程序，将显示一行的普通值。

Answer 4

这也适用于我：

<el-table
   :data="tenancy.renewals"
   stripe
   height="300"
   style="width: 100%">

   <el-table-column
     prop="term"
     label="Term"
     :formatter="formatTerm"
     width="180">
   </el-table-column>

   <el-table-column
     prop="started"
     label="Started"
     :formatter="formatColDate"
     width="180">
   </el-table-column>

   <el-table-column
     prop="expiry"
     :formatter="formatColDate"
     label="Expiry">
   </el-table-column>

   <el-table-column
     prop="amount"
     :formatter="formatAmount"
     label="Amount">
   </el-table-column>

 </el-table>

然后在你的方法中有对应于格式化程序的方法。

就我而言，我已经有了数字和日期的混合：

...
      formatTerm (row, col, value, index) {
        return this.addSuffix(value, false)
      },

      formatColDate (row, col, value, index) {
        return this.formatDate(value)
      },

      formatAmount (row, col, value, index) {
        return this.formatMoney(value)
      },
...

Answer 5

我感到头疼，但它对我有效

<el-table :data="tableData" style="width: 100%">
              <el-table-column label="shortName" width="180">
                <template v-slot="scope">
                  <span v-html="scope ? scope.row.shortName : ''"></span>
                </template>
              </el-table-column>
...

Vue element-ui <el-table-column> formatter – 如何显示html？

Vue element-ui <el-table-column> formatter – how to display html?

vue.js

vuejs2

element-ui