vue表格使用v-html。自定义表格列显示得内容 el-table-column 中
效果 富文本编辑后 html格式插入数据库
<el-table v-loading="loading" :data="manageList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <!-- <el-table-column label="评分项ID" align="center" prop="rulesId" />--> <el-table-column label="场景ID" align="center" prop="scenseId" /> <el-table-column label="评分项名称" align="center" prop="rulesContent" /> <el-table-column label="评分项描述" align="center" prop="rulesDetail" > <template slot-scope="scope"> <p v-html='scope.row.rulesDetail'></p> </template> </el-table-column> <el-table-column label="评分项分数" align="center" prop="rulesScore" /> <el-table-column label="评分项排序" align="center" prop="rulesOrder" /> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['rules:manage:edit']" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['rules:manage:remove']" >删除</el-button> </template> </el-table-column> </el-table>
参考:
分类:
Vue
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期