使⽤element-ui的table组件时，渲染为html格式背景
今天在做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="w._id)" type="text" size="small">编辑</el-button>
<el-button @click="w._id)" type="text" size="small">删除</el-button>
</template>
html富文本框
</el-table-column>
</el-table>
</div>
</template>
解决⽅法
观察代码发现，el-button使⽤了vue的相关标签（@click），那我们也可以尝试使⽤v-html来渲染，
⾸先查阅⼀下⽹上的资料，了解 template 的⽤法。
通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据：
{{w}} =>获取整⾏的数据
{{scope.$index}} => ⾏的下标
了解了⽤法之后，接下来就模仿他的写法在需要进⾏html渲染的列上进⾏修改。如下：
<el-table-column prop="body" label="内容" width="220">
<template slot-scope="scope">
<div v-html="w.body"></div>
</template>
</el-table-column>
结果如下：
如果觉得这篇⽂章对你有帮助，就给个推荐吧！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。