Vue element-uiформатер - как отобразить HTML?

Question

Как вернуть значение ячейки в формате 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?

РЕДАКТИРОВАНИЕ ЭПИЧИ: Я добавил ответ с решением.

Answer 1

Хорошо, после нескольких часов мозгового штурма я нашел довольно хорошее решение. Я размещаю их здесь для других - надеюсь, это кому-нибудь поможет.

Значение, отображаемое в пользовательском столбце, может быть:

• простая строка (проп)

• отформатированная строка (безопасно, без HTML или компонентов, через оригинальный форматер)

• пользовательское значение (HTML, компонент, также безопасно!)

Чтобы добиться этого, мне нужно было создать пользовательские компоненты форматирования, которые я помещаю в папку ie / 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 2

Если вы хотите отобразить пользовательский HTML-код для <el-table-column>, вам нужно использовать функциональность пользовательский шаблон столбца , а не :formatter prop. Это будет выглядеть примерно так:

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

В общем случае вы можете использовать директиву v-html, если вам нужно визуализировать неэкранированный HTML. Существуют некоторые последствия для безопасности, поэтому убедитесь, что вы понимаете их, прежде чем достигнуть v-html.

По сути, это сводится к следующему: никогда использовать v-html для визуализации контента, предоставленного пользователем.

Answer 3

Используйте область слота шаблона для добавления столбцов в формате 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')