Vue某列内容以html的形式展示（举例：超链接、a标签）

 

1、显示html的方法：将该列的type设成html，那么当给此列赋值为带html标签的内容的时候，html标签不会以文本的形式展示在页面上

template:

<vxe-table-column field="attachment" title="附件" width="300" type="html">
</vxe-table-column>

 

script:

 var fileInfo = '<a>'+ name + '.' + type + ' ' + file.size + ' ' + XEUtils.toDateString(new Date())+'</a>' ;
 row.attachment = fileInfo;

 

2、显示a标签：某列的返回结果需要为a标签带超链接的，给此列设置v-bind

template:

 

 <vxe-table-column field="attachment" title="附件" width="300">
                                <template #default="{ row }">
                                    <a v-bind:href="(row.path)" target="_black">{{row.attachment}} </a>
                                </template>

                            </vxe-table-column>

 

script:

 var fileInfo = '<a>'+ name + '.' + type + ' ' + file.size + ' ' + XEUtils.toDateString(new Date())+'</a>' ;       
                        row.attachment = fileInfo;
                        row.path = "www.baidu.com";