avue中怎样隐藏新增和编辑的按钮

325 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第9天,点击查看活动详情

 

大家好,我是雄雄,欢迎关注微信公众号:????雄雄的小课堂????

今天给大家分享的技术是:avue中如何设置新增和编辑的按钮隐藏掉。

涉及技术

  • 前端:avue,这个框架,说实话,刚开始用的时候,很难用,对新手及其的不友好,好多东西都找不到....
  • 后端:ssm(Springboot+SpringMvc+Mybatis Plus),不过后台技术今天涉及不到

需求说明

通常情况下,我们将表中数据展示出来之后,用户都是可以对每条数据进行增**(添加)删(删除)改(修改)查(查看)**操作的,但是某些特定的情况下,我们只希望用户可以对数据进行查看和删除,不希望新增和修改操作,怎么办呢?

解决方法:其实我们可以有好多方法实现,比如:

  1. 将增加、修改的按钮给禁用掉,用户无法点击
  2. 用户点击按钮的时候进行友好提示,不实现任何功能
  3. 直接隐藏掉这两个按钮

相比之下,还是推荐使用第三种方式,当然第一种也可以,第二种的弊端就是需要我们做逻辑处理,我的处理办法是直接这两按钮隐藏掉。

代码实现

代码实现很简单,只需要在前端vue页面中的option中添加两行代码:

addBtn:false,   //添加按钮
editBtn:false    //修改按钮

字面意思我们也能看的出来,add是增加,edit是编辑,值为false时隐藏,值为true时显示。

这样运行项目就看不到新增和编辑的按钮啦!

昨天看到一句话,顺便在这分享一下,原话是这样的:

其实做好个联网产品常简单,只要把联网用户想象成为一个脾气非常大,智商非常低,而且常没有耐心,又非常非常小气的人可以了。【不肯出一分钱】

说明一下:这段话并非贬义,只是站着程序员和产品经理的角度考虑的用户群体。