如何返回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？
史诗编辑：我添加了一个带有解决方案的答案。
好的，经过几个小时的头脑风暴，我找到了非常好的解决方案。我把它放在这里给其他人 - 我希望这对某人有所帮助。
自定义列中显示的值可以是：
-
简单字符串(道具(
格式化 字符串(安全，没有任何HTML或组件，通过原始格式化程序(
自定义值(html，组件，也很安全！
为了实现这一点，我必须创建自定义格式化程序组件，并将其放在文件夹中，即/TableFormatters/
为此，有一个简单的功能组件Datetime格式化程序，它显示带有图标的日期时间。
TableFormatters/DatetimeFormatter.vue
<template functional>
<span>
<i class="icon-date"></i> {{ props.row[props.column] }}
</span>
</template>
<script>
export default {
name: 'DatetimeFormatter',
}
</script>
这是列配置：
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
}
]
}
}
现在是时候定义<el-table>了：
<el-table :data="data">
<el-table-column
v-for="(column, index) in columns"
:key="index"
:label="columns[column] ? columns[column].label : column"
:prop="column"
:formatter="typeof columns[column].formatter === 'function' ? columns[column].formatter : null">
<template #default="{row}" v-if="typeof columns[column].formatter !== 'function'">
<div v-if="columns[column].formatter"
:is="columns[column].formatter"
:row="row"
:column="column">
</div>
<template v-else>
{{ row[column] }}
</template>
</template>
</el-table-column>
</el-table>
这就像一个魅力。格式化程序是怎么回事？ 首先，我们检查格式化程序是否设置为function。如果是这样，本机<el-table-column>格式化程序将获得控制权，因为不会创建<template #default={row}>。否则，将创建格式化程序组件(通过:is属性(。但是，它没有格式化程序，将显示一行的纯值。
如果要为<el-table-column>呈现自定义 HTML，则需要使用自定义列模板功能，而不是:formatterprop。它看起来像这样：
<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之前了解这些隐患。
从本质上讲，它归结为：切勿使用v-html来呈现用户提供的内容。
使用模板槽范围添加 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')
这也对我有用：
<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>
然后在你的方法中具有与格式化程序相对应的方法。
就我而言，我已经混合了数字和日期：
...
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)
},
...
我感到头痛，但它对我有用
<el-table :data="tableData" style="width: 100%">
<el-table-column label="shortName" width="180">
<template v-slot="scope">
<span v-html="scope ? scope.row.shortName : ''"></span>
</template>
</el-table-column>
...