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

vue-element admin
element ui github
element ui react
vue material
vue ui
element ui vue css
element ui mobile
element ui font

How to return html formatted cell value?

I want to get custom formatted value (with html or other components) with <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...
    ]
  }
}

But cell content is displayed as escaped html string. Is there any possibility to force html?

EPIC EDIT: I added an answer with a solution.


A Desktop UI Library - Element, import Vue from 'vue' import Element from 'element-ui' Vue.use(Element) // or import { Select, Button // } from 'element-ui' Vue.component(Select.name, Select​)  A Vue.js 2.0 UI Toolkit for Web. Contribute to ElemeFE/element development by creating an account on GitHub.


Use template slot scope to add html formatted columns

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

Element UI, Enroll in my Vue Course and get free bonsues! https://bit.ly/2Tt30az Element UI is a neat Vue Duration: 15:05 Posted: Mar 23, 2020 Use with vue-cli UI Skip this part if you've done everything in the Install section. If you prefer managing your project in vue-cli UI (by running vue ui), here's how you can add Element plugin: go to the Plugins menu, click the upper right + Add plugin button, find vue-cli-plugin-element and install it. Also there're some configurations for you.


If you want to render custom HTML for a <el-table-column>, you will need to make use of the custom column template functionality, rather than the :formatter prop. It's going to look something like this:

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

In the general case, you can make use of the v-html directive if you need to render unescaped HTML. There are some security implications involved, so make sure you understand those before reaching for v-html.

Essentially, it boils down to this: never use v-html to render content that was provided by the user.

ElemeFE/element: A Vue.js 2.0 UI Toolkit for Web, There are many UI frameworks for Vue.js. One popular one is Element UI. It provides the components that other frameworks provide. Also, it's  A starter kit for Element UI generated by vue-cli JavaScript 2.7k 957 A region picker based on Vue and ElementUI. component vue2 element-ui


Element Ui, UI elements into Vue 2.0 projects by Element.io. Element is a Desktop UI Library. It offers component based custom themes, forms, data tables and such, and  Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips. Get Started Why Vuetify?


element-ui, 15 of the Most Interesting Vue UI Component Libraries for 2020. by. Shaumik Daityari / Updated: June 10  A collection of projects made with Vue.js – Websites, UI Components, Frameworks, Apps and more!


Element UI Vue Introduction (Component Framework) On Basics , It looks like Element UI just eats the event and returns only the value. What you could do instead of @change (change) is @keyup.native (change) and then your par parameter will be the event rather than just the value.