Vue element-ui formatter – how to display html?

Question

How to return html formatted cell value?

I want to get custom formatted value (with html or other components) with formatter.

data() {
  return {
    columns: [
      {
        label: 'Created at',
        formatter: (row, col, value, index) => {
          return `${value}`
        }
      },
      // edit:
      {
        label: 'Address',
        formatter: (row, col, value, index) => {
          return ``
        }
      }
      // 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.

user_9764507 · Answer

Ok, after a few hours of brainstorming I found pretty nice solution. I'm putting it here for others - I hope this helps somebody.

Value displayed in custom column can be:

simple string (prop)
formatted string (safe, without any html or components, via original formatter)
customized value (html, component, also safe!)

In order to achieve this, I had to create custom formatter components, which I put in folder i.e. /TableFormatters/

For this purpose, there is simple functional component DatetimeFormatter that display date-time with icon.

TableFormatters/DatetimeFormatter.vue

Here come's columns configuration:

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

Now it's time to define :

This works like a charm. What's going on here with formatter? First we check if the formatter is set as a function. If so, the native formatter takes the control, because

user_3109473 · Answer

If you want to render custom HTML for a , 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:

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.

user_10555785 · Answer

Use template slot scope to add html formatted columns







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

user_1882460 · Answer

This also works for me:

Then in your methods have methods corresponding to the formatter ones.

In my case, I already have mixins for numbers and dates:

...
      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)
      },
...

user_2630686 · Answer

I feel headache, but it worked for me

...

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

5 Answers