首页 > 其他分享 >Vue某列内容以html的形式展示(举例:超链接、a标签)

Vue某列内容以html的形式展示(举例:超链接、a标签)

时间:2022-12-22 11:01:04浏览次数:37  
标签:Vue 某列 标签 html attachment fileInfo type row

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";

  

标签:Vue,某列,标签,html,attachment,fileInfo,type,row
From: https://www.cnblogs.com/ydc2023/p/16997917.html

相关文章

  • vue项目创建
    前言相关官方文档:https://cn.vuejs.org/guide/introduction.html  https://cli.vuejs.org/zh/guide/ 创建vue-cli项目vuecreatetest1......
  • Vuex从入门到精通
    一、vuex介绍目标什么是Vuex为什么学习Vuex通信方案组件关系数据通信父子关系父传子:props;子传父:$emit非父子关系vuex(一种组件通信方案)Vuex......
  • vue-router
    七.Vue-router1、什么是vue-routervue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传......
  • vue中webpack环境中动态注册插件
    //webpack动态引入文件constrequireComonents=require.context("./",true,/\.vue$/);//Vue提供的install方法进行插件的注册/**install方法第一个参数是vue......
  • html常用语句
    下拉框<tr><td>开课节次:</td><td><selectname="jieci"><optionvalue="1-2节">1-2节</option><optionvalue="3-4节">3-4......
  • [vue项目] 后台管理 11111111111111111
    文章目录​​gitee地址​​​​登录业务解析​​​​退出登录​​​​模板结构图​​​​路由的搭建​​​​品牌管理​​​​table数据渲染​​​​分页器​​​​点击添加......
  • [vue] DataV 组件
    http://datav.jiaminghi.com/guide/......
  • Vue3.0 生命周期
    所有生命周期钩子的this上下文都是绑定至实例的。beforeCreate:在实例初始化之后、进行数据帧听和事件/侦听器的配置之前同步调用。created:实例创建完成,主要包括数据帧听......
  • vue-router3,点击相同的路由,会报错NavigationDuplicated
    vue-router点击相同的路由链接会报错NavigationDuplicated{"_name":"NavigationDuplicated","name":"NavigationDuplicated","message":"Navigatingto......
  • Vite + Vue3导入 vue-i18n 插件
    使用Vite+Vue3导入vue-i18n插件Step1下载vue-i18n插件npminstallvue-i18nStep2新建local文件夹,创建index.jsindex.jsimport{createI18n}from"v......