web-dev-qa-db-ja.com

Vue element-ui <el-table-column> formatter – htmlを表示する方法は？

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 EDIT：解決策を含む回答を追加しました。

vue.jsvuejs2element-ui
3
Daniel

テンプレートスロットスコープを使用して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

<el-table-column>のカスタムHTMLをレンダリングする場合は、: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に到達する前にそれらを理解してください。

基本的に、これは次のように要約されます：neverv-htmlを使用して、ユーザーによって提供されます。

0
Vince