Ant Design Vue 中table表格解析 HTML
场景: 后台返回的数据中有HTML,让前台解析出来
解决方案: 主要使用 scopedSlots 和 slot-scope 和 v-html
demo:
<template> <div> <h3>解析HTML的p标签</h3> <a-table :columns="columns" :data-source="data" :pagination="false" :rowKey="(record,index)=>{return index}"> <a slot="name" slot-scope="text" v-html="text"> {{ text }}</a> </a-table> </div> </template> <script> /* 这是ant-design-vue */ import Vue from ‘vue‘ import Antd, { message,Select } from ‘ant-design-vue‘ //这是ant-design-vue import ‘ant-design-vue/dist/antd.css‘ Vue.use(Antd); /* 这是ant-design-vue */ const columns = [ { title: ‘姓名‘, dataIndex: ‘name‘, key: ‘name‘, scopedSlots: { customRender: ‘name‘ }, // scopedSlots 这个属性很关键 }, ]; const data = [ { key: ‘1‘, name: ‘daFei_01 <p>我是p标签</p>‘, }, { key: ‘2‘, name: ‘daFei_02‘, }, ]; export default { data() { return { data, columns } }, }; </script> <style scoped> </style>