Ant Design Vue 中table表格解析 HTML

时间:2020-07-17 18:14:20   收藏:0   阅读:1010

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>
View Code

技术分享图片

 

原文:https://www.cnblogs.com/dafei4/p/13331073.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!