Vue+iview的表格选中数据点击编辑后，跳转到编辑页后将数据传值到输入框默认显示

最新推荐文章于 2025-05-13 10:31:23 发布

.WYc

最新推荐文章于 2025-05-13 10:31:23 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

文章标签： Vue iview

转载请注明出处

本文链接：https://blog.youkuaiyun.com/weixin_42675298/article/details/90899355

在Vue+iview的表格应用中，当选择一条数据并点击编辑按钮时，会跳转到编辑页面。通过路由传参实现选中数据在新页面的输入框中默认显示。主要步骤包括：1) 绑定编辑按钮点击事件；2) 在methods中处理传参逻辑；3) 新页面接收并解析路由参数；4) 将数据填充到对应输入框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：在ivew表格中任选一条数据，在操作栏中点击‘编辑’图标，这里我没有用在行间编辑的方式，而是跳转到新的编辑页面，那么就需要路由传参到新的页面显示

1.首先给‘编辑’按钮绑定点击事件

        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                class: 'editHover',
                props: {
                  type: 'md-create',
                  size: 15
                },
                attrs: {
                  title: '编辑'
                },
                on: {
                  click: () => {
                    this.handleEdit(params.row)             //编辑方法
                  }
                }
              })
            ]);
          }
        }

2.然后在methods()中写这个方法：