elementui表格table中实现内容的换行
通过作用域插槽传递内容到表格行内,再通过 v-html 进行内容的替换。elementui 中的 table 行内的内容不能进行换行。
·
问题
elementui 中的 table 行内的内容不能进行换行。
解决方法
思路:
利用 作用域插槽 结合 v-html,通过作用域插槽传递内容到表格行内,再通过 v-html 进行内容的替换。
代码:
<el-table
:data="tableData"
stripe
style="width: 100%"
@row-click="handleTableRow"
border
>
<el-table-column prop="project" label="项目" width="290">
<template slot-scope="scope">
<div v-html="scope.row.content"></div>
</template>
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
tableData: [
{
project: "aaa<br/>111"
},
{
project: "bbb<br/>222"
},
]
}
}
}
</script>
👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者
更多推荐
已为社区贡献3条内容
所有评论(0)