Vue.js Vue元素用户界面<；el表格列>；格式化程序&x2013 ；如何显示html？

如何返回html格式的单元格值

我想使用

格式化程序
获取自定义格式化值（使用html或其他组件）



data（）{
返回{
栏目：[
{
标签：“创建于”，
格式化程序：（行、列、值、索引）=>{
返回`${value}`
}
},
//编辑：
{
标签：'地址'，
格式化程序：（行、列、值、索引）=>{
返回``
}
}
//其他动态列。。。
]
}
}

但单元格内容显示为转义的html字符串。有没有可能强制使用html

EPIC EDIT:我添加了一个带有解决方案的答案。
使用模板槽范围添加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')


{{scope.row.text}
var Main={
数据（）{
返回{
tblData：[
{title:'title1'，text:'text1'}，
{title:'title2'，text:'text2'}，
{title:'title3'，text:'text3'}，
],
}
},
方法：{
}
}
变量向量=Vue.extend（主）
新Ctor（）.$mount（“#app”）
如果要为
呈现自定义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>


{{scope.row.value}

在一般情况下，如果需要呈现未缩放的HTML，可以使用该指令。这涉及到一些安全问题，因此在接触
v-html
之前，请确保您了解这些问题

本质上，它可以归结为：从不使用
v-html
来呈现用户提供的内容。
好的，经过几个小时的头脑风暴，我找到了非常好的解决方案。我把它放在这里是为了其他人-我希望这能帮助别人

自定义列中显示的值可以是：


简单字符串（prop）


格式化字符串（安全，无任何html或组件，通过原始格式化程序）


自定义值（html、组件、也安全！）



为了实现这一点，我必须创建自定义格式化程序组件，并将其放在文件夹I./TableFormatters中/

为此，有一个简单的功能组件DatetimeFormatter，它用图标显示日期时间

TableFormatters/DatetimeFormatter.vue


{{props.row[props.column]}
导出默认值{
名称：“DatetimeFormatter”，
}

下面是列配置：

从“./TableFormatters/DatetimeFormatter”导入DatetimeFormatter
// ...
数据（）{
返回{
数据：[/*…*/]，
栏目：[
姓名：{
标签：“名称”，
},
声明：{
标签：'国家'，
格式化程序：行=>{
返回“State:”+row.State\u标签
}
},
创建于：{
标签：“创建于”，
格式化程序：DatetimeFormatter
}
]
}
}

现在是定义
的时候了：


{{行[列]}}

这很有魅力。格式化程序是怎么回事？
首先，我们检查格式化程序是否设置为
函数
。如果是这样，则本机
格式化程序将获得控制权，因为不会创建
。否则将创建格式化程序组件（通过
：is
属性）。但是，如果没有格式化程序，将显示行的普通值。
这对我也适用：

<el-table
   :data="tenancy.renewals"
   stripe
   height="300"
   style="width: 100%">

   <el-table-column
     prop="term"
     label="Term"
     :formatter="formatTerm"
     width="180">
   </el-table-column>

   <el-table-column
     prop="started"
     label="Started"
     :formatter="formatColDate"
     width="180">
   </el-table-column>

   <el-table-column
     prop="expiry"
     :formatter="formatColDate"
     label="Expiry">
   </el-table-column>

   <el-table-column
     prop="amount"
     :formatter="formatAmount"
     label="Amount">
   </el-table-column>

 </el-table>

谢谢，我以前使用过带有静态表列模板的
。但是如果有更多带有自定义格式化程序的列呢*我通过添加更多的示例列更新了我的问题。最好使用
v-slot
而不是
slot scope
，因为它已被弃用，而且在解构时会更好：
或更短的
谢谢，但我需要为每个列使用完整的自定义模板（带有html等）。我用我找到的解决方案添加了答案。感谢您的更新，如果我的解决方案对您有帮助，您也可以更新此答案。这很好，但它没有告诉我们是否/如何显示html，这是个问题？
...
      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)
      },
...