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;
},