el-table中点击跳转到详情页的两种方法

这篇具有很好参考价值的文章主要介绍了el-table中点击跳转到详情页的两种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

el-table中点击跳转到详情页的两种方法,web前端,vue,vue.js,elementui,javascript

el-table中点击跳转到详情页的两种方法,web前端,vue,vue.js,elementui,javascript

跳转的两种写法:

1.使用keep-alive使组件缓存,防止刷新时参数丢失

el-table中点击跳转到详情页的两种方法,web前端,vue,vue.js,elementui,javascript

keep-alive 组件用于缓存和保持组件的状态,而不是路由参数。它可以在组件切换时保留组件的状态,从而避免重新渲染和加载数据。 keep-alive 主要用于提高页面性能和用户体验,而不涉及路由参数的传递和保留。这里使用 <keep-alive> 组件是为了在刷新页面时保持之前传递的参数,确保页面能够正确地显示之前的状态, 其实使用params更合适

<el-table
          size="mini"
          :data="tableData"
          border
          style="width: 100%"
          :max-height="maxHeight"
        >
          <el-table-column prop="stationName" label="站点名称">
            <template slot-scope="scope">
              <keep-alive>
                <span
                  class="goDetail"
                  v-hasPermi="['station:detail']"
                  @click="go2Detail(scope.row)"
                >
                  {{ scope.row.stationName }}
                </span>
              </keep-alive>
            </template>
          </el-table-column>
<el-table>
methods: {
// 跳转到详情页面
    go2Detail(row) {
      this.$router.push({
        path: "/site/siteDetail",
        query: {
          row
        }
      });
    },
 }

2.使用router-link , 使用 <router-link> 进行页面跳转时,刷新页面不会丢失携带的参数。这是因为 <router-link> 在进行路由导航时,会将参数作为路由的一部分,并在刷新页面时将这些参数保留下来。

<el-table-column label="标准名称" align="center" :show-overflow-tooltip="false">
	<template slot-scope="scope">
		<router-link :to="'/water/standard/limit/' + scope.row.id" class="link-type">
		    <span>{{ scope.row.standardName }}</span>
		</router-link>
	</template>
</el-table-column>

 需要在router/index.js中配置路由文章来源地址https://www.toymoban.com/news/detail-693292.html

  {
    path: '/water',
    component: Layout,
    hidden: true,
    children: [{
      path: 'standard/limit/:standardId',
      component: (resolve) => require(['@/views/water/standard/limit'], resolve),
      name: 'Limit',
      meta: {
        title: '标准详情',
        icon: ''
      }
    }]
  },

到了这里,关于el-table中点击跳转到详情页的两种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue + el-table点击表头改变其当前样式

    废话不多说,先看效果: 网上找了一大圈没有符合的,只能自己看着搞: 直接贴代码: 这种写法经使用过程中发现问题,故修改为以下:

    2024年02月13日
    浏览(39)
  • element ui - el-table给单元格添加点击事件

    el-table中,点击版本号触发查看配置功能,但是产品想将热区扩大,从点击版本号扩大到点击整个单元格都可以查看。 在 el-table-column 中的 template 标签里,添加一个 div元素 包裹版本号和el-tag,将点击事件绑定在div元素上 :

    2024年02月12日
    浏览(44)
  • [element-ui] el-table点击高亮当前行

    1、highlight-current-row 2、:row-class-name=“tableRowClassName”,需要借助@row-click=\\\"handleRowClick\\\"获取当前点击行的下标 参考: elementUI中table点击高亮当前行的两种方式

    2024年03月21日
    浏览(51)
  • element-plus el-table 点击单行修改背景色

    element-plus + el-table 点击行选中并修改背景色+文字颜色 方法一: 重点: highlight-current-row element-plus 本身有给提供这个功能,而且比第二个方法更好用,第二个方法在有列固定的情况下,样式会不生效,所以建议直接用第一种 方法二: 重点: @row-click :row-style

    2024年02月15日
    浏览(37)
  • element-ui中el-table点击其他自定义按钮展开table中某一行

    在日常开发中,我们遇见了会有点击某些按钮,使得表格行展开的需求,这时候去查看文档 element-ui(table) 这里官方提供了示例为在行最左侧有一个展开合并icon,但是点其他地方不能展开,我们又想点其他地方而展开 我们看见是在table-column上定了type为expand,而该列里面的

    2024年01月18日
    浏览(37)
  • input改造文件上传,el-table的改造,点击上传,拖拽上传,多选上传

    第一个input标签效果 第二个input标签的效果 el-table的改造效果 3、input本身支持拖拽上传但要设置opcity为0,不能设置diaplay:none或者visiables   如果不使用拖拽上传的话,只点击上传可使用如下 input同时也支持多选文件上传input mutilple/ 4、表格效果 只设置一小框的样式

    2024年02月07日
    浏览(43)
  • vue element ui el-table单元格里面显示多张图片点击并放大

    效果图: 一个单元格里面显示三张图片,并且点击图片可以放大。 1.将图片v-for渲染出来,具体上代码 注:el-popover的属性   2.单元格里能够展示多张图片,需要在请求的接口里面做处理 以上两步,就可以实现上面的功能。

    2024年02月07日
    浏览(52)
  • el-table 个体行绑定点击事件时 表格中有el-radio和el-checkbox 点击触发两次事件处理方法

    el-table 个体行绑定点击事件时 表格中有el-radio和el-checkbox 点击触发两次事件处理方法 代码如下(示例):

    2024年02月05日
    浏览(56)
  • 帝国CMS商城提交订单后跳转到订单列表页的实现方法

    帝国CMS商城提交订单后默认返回购物车页面,但订单已经提交了,购物车基本上是空空如也,所以更希望提交订单后跳转到订单列表页查看订单。 打开 e/ShopSys/class/ShopSysFun.php 这个文件, 找到:(约534行) $location=\\\"buycar/\\\"; 修改为: $location=\\\"ListDd/\\\"; 不想改文件可以参考:htt

    2024年02月03日
    浏览(62)
  • 帝国CMS电脑端自动跳转到手机端动态页和静态页的实现代码

    Empire CMS 7.2版本引入了全面的多接入终端功能,使网站更方便地制作多个移动接入终端。版本7.5中的多访问者升级:支持主端的后台刷新以生成每个访问端的静态页面,并且多访问端在静态模式下使用更方便。 页面头部 JS代码在body前面加上以下HTML源代码  列表页 动态页:

    2024年02月03日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包