formatter
正常使用 formatter
<el-table-column prop="title" label="标题" :formatter="(row, column, cellValue, index) => stateFormat(row, column, cellValue, index, 20)"></el-table-column>
// 格式化表格内容
stateFormat(row, column, cellValue, index, value) {
if (!cellValue) return "";
if (cellValue.length > value) {
return cellValue.slice(0, value) + "...";
}
return cellValue;
},
scope
使用 scope 后 formatter 就失效了
<el-table-column prop="content" label="内容" :formatter="stateFormat">
<template slot-scope="scope">
<span v-html="scope.row.content"></span>
</template>
</el-table-column>
解决办法
<el-table-column prop="content" label="内容" :formatter="stateFormat">
<template slot-scope="scope">
<div v-if="scope.row.content" v-html="intFormatter(scope.row.content)"></div>
</template>
</el-table-column>
使用 intFormatter 方法进行格式化处理
intFormatter(content) {
if (!content) return "";
if (content.length > 50) {
return content.slice(0, 50) + "...";
}
return content;
},