Ant Design Vue 中table表格解析 HTML

Ant Design Vue 中table表格解析 HTML

场景: 后台返回的数据中有HTML,让前台解析出来

解决方案: 主要使用   scopedSlots  和  slot-scope 和 v-html 

demo:

Ant Design Vue 中table表格解析 HTML
<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>
View Code

Ant Design Vue 中table表格解析 HTML

 

Ant Design Vue 中table表格解析 HTML

上一篇:.net core 和 WPF 开发升讯威在线客服与营销系统:(插曲)一次端口攻击行为的分析与应对


下一篇:介绍:一款可以描绘圆圈进度条的jQuery插件(可用作统计图)