Vue+ElementUi实现点击表格链接页面跳转和路由效果

 更新时间:2024年03月13日 11:14:29   作者:記億揺晃着的那天  
这篇文章主要介绍了Vue+ElementUi实现点击表格中链接进行页面跳转和路由,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

1、页面跳转,先看效果

点击表格中的asin会跳转到亚马逊购物界面

怎么做的呢,直接上代码

<el-table-column
        prop="asin"
        label="asin"
        width="150"
        fixed>
        <template slot-scope="scope">
          <el-link :href="scope.row.url" rel="external nofollow"  type="primary" target="_blank">{{scope.row.asin}}</el-link>
        </template>
      </el-table-column>

asin那一列通过<template>标签把scope传进去,scope是包含这一行的信息的,在标签里面使用<el-link>标签配合数据里面的url实现页面跳转,获取某个属性可以通过scope.row.属性名 获取

2、路由切换加传参数,先看效果

 点击标题

可以看到路由切换到产品分析了,并且asin数据也传递过去了

实现直接看代码(需要注意的是需要传参的话只能使用name属性,使用path属性跳转是不能传递参数的)

<el-table-column
        prop="title"
        label="标题"
        width="150"
        :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <router-link :to= "{name: 'productsAnalysis',params: {asin: scope.row.asin }}">
            <span>
              {{scope.row.title}}
            </span>
          </router-link>
        </template>
      </el-table-column>

可以看到路由切换与页面跳转类似,都是通过<template>标签实现的,区别就是<router-link>里面直接

{{scope.row.title}}不好使,需要借助<span>标签实现内容展示

路由切换使用路由名字

productsAnalysis,点击标题时路由器会找到productsAnalysis路由,并且把参数params传过去,看一下我的路由怎么实现的吧

{
    path: '/console',
    component: Layout,
    redirect: '/console/productsAnalysis',
    name: 'console',
    meta: { title: '销售', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'productsAnalysis',
        name: 'productsAnalysis',
        component: () => import('@/views/products/productsAnalysis'),
        meta: { title: '产品分析', icon: 'table' }
      },
      {
        path: 'productPerspective',
        name: 'productPerspective',
        component: () => import('@/views/products/productPerspective'),
        meta: { title: '产品透视', icon: 'table' }
      }
    ]
  },

可以看到路由名为productsAnalysis的会跳转到

@/views/products/productsAnalysis组件

 看一下productsAnalysis组件怎么拿到参数的

<template>
<dev>
  <h1>ProductsAnalysis</h1>
  <h1>{{asin}}</h1>
</dev>
</template>
<script>
import router from '@/router'
export default {
  data(){
    return{
      asin: null
    }
  },
  created() {
    this.asin = this.$route.params.asin
  }
}
</script>
<style scoped>
</style>

直接

this.$route.params.asin就能拿到路由传过来的参数

到此这篇关于Vue+ElementUi实现点击表格中链接进行页面跳转和路由的文章就介绍到这了,更多相关Vue ElementUi表格链接跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue Draggable实现拖动改变顺序

    vue Draggable实现拖动改变顺序

    这篇文章主要为大家详细介绍了vue Draggable实现拖动改变顺序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue3配置bem样式架构的代码详解

    Vue3配置bem样式架构的代码详解

    BEM是一种前端命名方法论,主要是针对CSS,意思是块(Block)、元素(Element)、修饰符(Modifier)的简写,这种命名方法让CSS便于统一团队开发规范和方便维护,本文给大家介绍了Vue3配置bem样式架构,需要的朋友可以参考下
    2024-10-10
  • Vue3超详细的ref()用法教程(看这一篇就够了!)

    Vue3超详细的ref()用法教程(看这一篇就够了!)

    这篇文章主要给大家介绍了关于Vue3超详细的ref()用法的相关资料,在Vue3中ref函数不仅可以用于在组件中获取DOM元素或子组件的引用,还可以直接访问组件元素本身,需要的朋友可以参考下
    2023-07-07
  • vue element和nuxt的使用技巧分享

    vue element和nuxt的使用技巧分享

    这篇文章主要介绍了vue element和nuxt的使用技巧分享,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • Vue-ANTD表单输入中自定义校验一些正则表达式规则介绍

    Vue-ANTD表单输入中自定义校验一些正则表达式规则介绍

    这篇文章主要介绍了Vue-ANTD表单输入中自定义校验一些正则表达式规则介绍,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 帮助我们高效操作的Virtual DOM简单实现

    帮助我们高效操作的Virtual DOM简单实现

    这篇文章主要为大家介绍了帮助我们高效操作Virtual DOM简单实现及原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Vue2+JS实现扫雷小游戏

    Vue2+JS实现扫雷小游戏

    实现小游戏可以锻炼自己的逻辑思维能力,也不会很枯燥,完成时会给自己带来一种满足感。本文就将利用Vue和JS实现简单的扫雷小游戏,需要的可以参考一下
    2022-06-06
  • vue3动态加载对话框的方法实例

    vue3动态加载对话框的方法实例

    对话框是很常用的组件,在很多地方都会用到,下面这篇文章主要给大家介绍了关于vue3动态加载对话框的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • vue input 输入校验字母数字组合且长度小于30的实现代码

    vue input 输入校验字母数字组合且长度小于30的实现代码

    这篇文章主要介绍了vue input 校验字母数字组合且长度小于30的实现代码,文章给大家补充介绍了在Vue.Js下使用el-input框只能输入数字并限制位数并且限制中文输入以及粘贴功能,感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • Vue3中如何使用异步请求示例详解

    Vue3中如何使用异步请求示例详解

    Vue3增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,下面这篇文章主要给大家介绍了关于Vue3中如何使用异步请求的相关资料,需要的朋友可以参考下
    2022-06-06

最新评论