Ant Design Vue 中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 这个属性很关键
        },
    ];

    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>