web-dev-qa-db-fra.com

Vue element-ui <el-table-column> formatter - comment afficher du html?

Comment renvoyer une valeur de cellule au format HTML?

Je souhaite obtenir une valeur formatée personnalisée (avec du HTML ou d'autres composants) avec <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...
    ]
  }
}

Mais le contenu des cellules est affiché sous forme de chaîne html d'échappement. Existe-t-il une possibilité de forcer le HTML?

EPIC EDIT: J'ai ajouté une réponse avec une solution.

vue.jsvuejs2element-ui
3
Daniel

Utiliser la portée de l'emplacement du modèle pour ajouter des colonnes au format 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')
0
chans

Si vous souhaitez rendre le HTML personnalisé pour un <el-table-column>, vous devrez utiliser la fonctionnalité modèle de colonne personnalisé , plutôt que :formatter prop. Cela va ressembler à ceci:

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

Dans le cas général, vous pouvez utiliser les v-html directive si vous avez besoin de restituer du HTML non échappé. Il y a des implications de sécurité impliquées, alors assurez-vous de bien les comprendre avant de rechercher v-html.

Essentiellement, cela se résume à ceci: jamais utilisez v-html pour afficher le contenu fourni par l'utilisateur.

0
Vince