AntDesignVue中table表格解析HTML 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 这个属性很关键antdesignvue 配置外部文件
},
];
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>
View Code