背景
今天在做vue的項目時，使用到 element-ui 的 table 組件，使用富文本編輯器進行新增操作后，發現 html格式 並沒有被識別
原因
在 element-ui 中，table組件默認只渲染 文本格式 的內容
<div>
<el-table :data="articlesData">
<el-table-column prop="title" label="標題" width="140"></el-table-column>
<el-table-column prop="body" label="內容" width="220">
</el-table-column>
<el-table-column prop="type" label="類別" width="80"></el-table-column>
<el-table-column fixed="left" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="modify(scope.row._id)" type="text" size="small">編輯</el-button>
<el-button @click="remove(scope.row._id)" type="text" size="small">刪除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
解決方法
觀察代碼發現，el-button使用了vue的相關標簽（@click），那我們也可以嘗試使用v-html來渲染，
首先查閱一下網上的資料，了解 template 的用法。
通過 Scoped slot 可以獲取到 row, column, $index 和 store（table 內部的狀態管理）的數據：
{{scope.row}} =>獲取整行的數據
{{scope.$index}} => 行的下標
了解了用法之后，接下來就模仿他的寫法在 需要進行html渲染 的列上進行修改。如下：
<el-table-column prop="body" label="內容" width="220">
<template slot-scope="scope">
<div v-html="scope.row.body"></div>
</template>
</el-table-column>
結果如下：
