Vue中使用element-ui的按钮跳转路径并保存数据

最新推荐文章于 2024-05-02 10:31:20 发布
最新推荐文章于 2024-05-02 10:31:20 发布
阅读量3.6k 收藏 2
点赞数 5
分类专栏： Vue Element-ui 文章标签： 效果显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ryan_black/article/details/102932258
版权
这是原来写好的页面效果:

在这里插入图片描述

现在我想在这个修改按钮上设置一个点击跳转的效果,但是第一次就错了还是那么日常先来一个错误示范(也就是我第一次写的样子):
代码:

在这里插入图片描述

页面效果(什么都没有):

在这里插入图片描述

对!没错!!!他这个图标就是变成扁的了!!!而且点击没有任何效果!!!,路径变都没变一下.
仔细一想既然在按钮里面写不生效,那我把按钮放在路由里面呢…结果还真就可以用!:
代码:

在这里插入图片描述

页面(附带数据):

在这里插入图片描述

Ryan_black
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
下载文件，并弹出保存提示框，选择位置，绝对路径 or相对路径
sinat_34881157的博客
06-21 2万+
下载文件，并弹出保存提示框，选择位置，绝对路径 or相对路径
vue+element ui表格组件多选保存上一页选中的内容
weixin_43410094的博客
05-25 278
添加 ref="multipleTable"后this.$refs.multipleTable.clearSelection();@selection-change="handleSelectionChange"是选中时触发方法。:row-key="getRowKeys"添加在el-table内。这个方法传的值是选中表格的数据，在选中取消时会自动对数组进行增删。
【Vue】结合ElementUI实现简单数据请求和页面跳转功能
最新发布
qq_51933234的博客
05-02 976
到这里关于vue的一些基本知识就学习的差不多了，接下来博主正在做一个springboot+vue的项目，后面会将我们学习的内容用到项目中去，也会写相应的博客与大家分享技术。那我们就下一篇博客再见！
使用 element ui 上传文件图片的方法 和 后台要如何获取并保c存到对应文件夹中
weixin_50582284的博客
09-14 6349
第一次使element ui上传图片归纳一下笔记，适合小白学习。网上刚开始找了很多，但是都是一堆屁话。 都是element ui 的使用 没有写后太怎么保存获取的。经过一顿操作之后。有了一定的了解。毕竟也是第一次使用element ui 上传图片。
element-plus 中 el-upload 通过其他位置的点击触发选择文件功能
业余前端的职业经历
06-08 3753
其实刚好还是有这样的需求的 但是我看官网中的那个 handleStart很像 解释的也很像 但就是用不了 难受死了。其实你要是看过vue源码的童鞋 可能知道 在组件实例中有一个 el属性 是用来和实际dom的映射。大概率下面 el-upload下面会有封装的input元素。没办法只能自己通过click 点击的方式触发了。好了这下就可以了 难受香菇。关注我 持续更新前端知识。
使用vue3+element-ui plus 快速构建后台管理模板
10-17
Vue3和Element UI Plus是现代前端开发中的两个热门工具，它们结合在一起可以高效地搭建功能丰富的后台管理系统。Vue3作为Vue.js的最新版本，引入了许多性能优化和开发体验改进的特性，而Element UI Plus则是基于...
vue-element-admin中文版本
07-20
Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue.js 的组件库，它的设计风格简洁明了，组件丰富，包括表格、按钮、提示、通知、布局等多种常见的 UI 元素，旨在提升开发效率并保持界面的一致性。...
vue2.0结合Element-ui实战案例
10-17
总的来说，这个实战案例将涵盖Vue 2.0的基本使用，Element-UI组件的集成，以及前后端数据交互的实现，是学习Vue 2.0与Element-UI结合开发的绝佳实践。通过这个案例，开发者不仅可以提升对Vue和Element-UI的理解，还...
vue-element-ui
09-21
Vue Element UI 是一个基于 Vue.js 和 Element UI 的前端开发框架，专为构建企业级管理界面设计。Vue.js 是一个轻量级、高性能的前端组件化框架，而 Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0...
基于vue2 + Element-ui搭建的后台管理系统源码.zip
10-12
Vue2和Element-UI是现代前端开发中常用的两个技术栈，它们共同构建了一个高效、易用的后台管理系统。Vue2是一个轻量级的JavaScript框架，以其简洁的API和高效的响应式系统著称，而Element-UI则是一个基于Vue2的组件...
文件下载/保存路径弹出框
05-26
简单实用的文件路径选择框，可直接复制实用，希望对大家有帮助！
Vue中使用element-ui 给按钮绑定一个单击事件，实现点击按钮就弹出一个dialog对话框
热门推荐
m0_70807708的博客
08-17 2万+
实现给按钮绑定一个单击事件，实现点击按钮就弹出一个dialog对话框，在对话框中可输入数据进行提交，在点击取消时对话框关闭的功能
vue前端实现图片下载，实现点击按钮弹出本地窗口，选择自定义保存路径
m0_71585401的博客
06-13 5763
vue前端实现图片下载，实现点击按钮弹出本地窗口，选择自定义保存路径
vue---文件的导入、导出及保存
bidepanm的博客
07-08 2105
文件导入导出
利用elementui的el-table实现跨页保存单击勾选状态和全选状态（在前端分页）
树上骑个猴的博客
07-31 4180
思路: 从接口获取全部数据，前端完成分页数据展示，让el-table跨页保存单击勾选状态，让el-table跨页保存全选状态。 第一步 前端分页，从接口获取全部数据，所以不要给后端传递page和rows参数 第二步 用slice分割当前页码要显示的数据 代码： :data="tableData.slice((currentPage[customerCode]-1)*pagesize[customerCode],currentPage[customerCode]*pagesize[customerCode
基于Element-ui 表单弹窗列表选择封装
m0_51431448的博客
01-03 4885
不知道怎么描述这个东西了。el-select下拉框大家都知道，但是下拉框只能选择一个，而且如果数据太多的话也不太容易选择，所以这里就是封装了组件包含对应的弹窗，就是能实现多选，而且列表也是分页展示的，选择完之后将对应的名称展示在文本框中，传给后端对应的用逗号隔开（用什么隔开都可以，跟后端商量）的id。这个关联合同就是我们封装的，输入框添加了disabled，不可编辑的，只能通过点击右侧弹窗来进行选择。
elementui步骤条自定义点击跳转页面，返回步骤条保留信息
qq_52959651的博客
09-02 5183
先看效果图 如果没有点击下一步，步骤条将不可点击，点击下一步可返回上一步，步骤条也可以来回点击跳转页面，还可以转到其他页面，回来后步骤条依然没有改变，保留状态，这个是我自己想的方法，可能有一些不太对，但是我这边大致功能都能实现，如果有什么问题可以指出。 代码 这是我的目录结构，现实中根据你项目需求来 91.vue(起名不规范，这是我专门的测试页面) 步骤条单独是一个组件 <template> <div class="main"> <el-button typ
Vue在ElementUI下的input输入框中按下“点”按键自动跳转（聚焦）下一个输入框
奔跑的面条博客
03-24 3933
我是根据class去获取节点,因为elementUI会对input进行多一层的渲染，所以我们在获取到当前div节点之后还要去里面找到对应的input节点 这里是template <el-input @input="focusNextInput(0);" class="class1" v-model.number="first" ></el-input> &...
elementUI点击按钮弹出时间选择器
qq_42828972的博客
07-02 7258
用按钮包裹时间控件的输入框并隐藏
vue使用element-ui 搭建管理后台详细教程
10-23
可以通过路由配置文件来定义不同页面的路由路径，然后在菜单组件中使用路由链接来跳转到不同的页面。 总之，使用Element-UI搭建管理后台是非常简单和高效的。通过引入Element-UI的样式和组件，可以快速搭建出功能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值