情景
el-table-column里面添加formatter 对值进行格式化,一直不生效,后来发现是template中插槽作用域导致的,也就是formatter作用于单个字段(即一个el-table-column)就是下面这种:
<el-table-column label="用户角色" width="120" :formatter="formatFunc">
<template slot-scope="scope">
<span>{{ scope.row.role.roleName }}</span>
</template>
</el-table-column>
原因:formatter 和 scope template 不能同时存在
解决方案:使用slot,自定义 formatter
这样就可以
<el-table-column prop="roleName" label="用户角色" width="120" :formatter="formatFunc">
</el-table-column>
问题:
但是组件中如何处理?
<!-- 处理render函数部分逻辑 -->
<div v-else-if="item.render" slot-scope="{ row }">
{{ item.render(row) }}
</div>
页面传参
{
label: '状态',
prop: 'status',
render: (row) => {
console.log('row',row)
const data = this.table_status[row.status]
return data ? data.label :'--'
}
},
处理数据
formatter(row) {
if (row.prop == "file_size") {
if (row.size < 1024) {
return row + "B"
} else if (row < 1024*1024) {
return (Number(row) / 1024).toFixed(3) + "KB"
} else if (row < 1024*1024*1024) {
return (Number(row) / 1024 / 1024).toFixed(3) + "MB"
} else {
return (Number(row) / 1024 / 1024 / 1024).toFixed(3) + "GB"
}
}
},
但是如果想根据不同的状态显示不一样的字体颜色呢?
<!-- 处理render函数部分逻辑 -->
<div v-else-if="item.render" slot-scope="{ row }"> <span v-html="item.render(row) "></span></div>
// 通过重要程度设置相关样式
formatter(content) {
if(content == "重要") {
return `<span style="color: rgb(37, 87, 150);"> ${content} </span> `
} else if (content == "严重") {
return `<span style="color: rgb(246, 23, 38);"> ${content} </span>`
} else {
return `<span> ${content} </span>`;
}
页面上使用
{
label: '状态',
prop: 'status',
render: (row) => {
const data = this.table_status[row.status]
return data ? `<span style="color: red"> ${data.label} </span> ` : '--'
},
},
好啦~
如果不是二次封装的组件 又要如何处理呢
<el-table-column prop="status" label="状态" :formatter="statusFormatter"></el-table-column>、
statusFormatter(row) {
if (row.status == 0) {
return `<span style="color:#67c23a">启用</span>`
} else {
return `<span style="color:#f78989">禁用</span>`
}
},
在 Vue 中,如果你想在模板中插入由 formatter
函数返回的 HTML 字符串,并希望这些 HTML 标签被浏览器解析为实际的 DOM 元素,你需要确保 Vue 能够识别并处理这些字符串作为原始 HTML。这通常通过使用 v-html
指令来完成。
但是,el-table-column
的 formatter
函数返回的字符串默认会被当做纯文本处理,并不会被解析为 HTML。为了解决这个问题,你可以考虑以下两种方法:
方法:使用 scoped slots 而不是 formatter
这是推荐的方法,因为它提供了更好的控制和安全性。使用 scoped slots,你可以直接在模板中编写 HTML,并应用样式。
<el-table :data="tableData">
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
<span :style="{ color: scope.row.status === 0 ? '#67c23a' : '#f78989' }">
{{ scope.row.status === 0 ? '启用' : '禁用' }}
</span>
</template>
</el-table-column>
<!-- 其他列 -->
</el-table>
在这个例子中,我们使用了三元表达式来根据 status
的值动态设置颜色,并直接显示文本“启用”或“禁用”。