ElementPlus的el-table-column如何添加超链接的代码

简介: ElementPlus的el-table-column如何添加超链接的代码

原文链接:

VUE 中,在 el-table-column中添加超链接 与 跳转外链 的代码_el-table-column 链接-CSDN博客

有的时候,可能会遇到想要在el-table-column添加link标签的需求,比如这里我写了一个链接,想要直接点击链接,找到相关网站

自己ElementPlus的代码,如何添加link标签呢?

<el-table-column label="网站链接" prop="link"></el-table-column>

将代码写成这样就可以了,三个注意点,href对应的路径,要跟prop相同:

        <el-table-column label="网站链接" prop="link">
            <template v-slot="scope">
                <a :href="scope.row.link" target="_blank" class="buttonText" style="text-decoration: none;color:#409eff">{{scope.row.link}}</a>
            </template>
        </el-table-column>

此时link标签就可以了跳转了


目录
打赏
0
0
0
0
42
分享
相关文章
用JQuery实现选中select里面的option显示对应的div
用JQuery实现选中select里面的option显示对应的div
记Vue3在table使用dropdown的写法
记Vue3在table使用dropdown的写法
251 0
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
6400 0
Element el-select 选择器(下拉框)详解
|
6月前
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
1364 0
vue+elementui中,el-select多选下拉列表中,如何同时获取:value和:label的值?
vue+elementui中,el-select多选下拉列表中,如何同时获取:value和:label的值?
Vue3中el-table表格数据不显示
Vue3中el-table表格数据不显示
el-option样式改变以及多个el-option无法并列问题详解(element-plus+Vue3)
el-option样式改变以及多个el-option无法并列问题详解(element-plus+Vue3)
514 0
Vue3中无法为el-tree-select设置反选问题分析
Vue3中无法为el-tree-select设置反选问题分析
266 0
el-table表格还可以这么玩
我们都知道表格是横向渲染的,一行一行去展示。不过博主这里有个需求是纵向渲染,一列一列去展示,下面是全部代码,分享出来或许能帮到你们
309 1
el-table表格还可以这么玩
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等