vue+antd做一个简单显隐子组件的功能

最新推荐文章于 2024-05-30 15:10:34 发布

圆碌碌一口吃两个

最新推荐文章于 2024-05-30 15:10:34 发布

阅读量720

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_36445925/article/details/108854215

版权

需求：点击按钮就可以选择不同的查询方式

第一步：做出按钮（想要别的样式看官网https://www.antdv.com/components/radio-cn/）

第二步：给每个按钮绑定一个点击函数

第三步：将你想用的组件或者插件放在一个div里，关键的是给其绑定v-show

第四步：data（）看你选择是默认显示true还是不显示false

第五步：显示方法

第六步：我把隐藏方法放在了打开别的按钮里，就有一种切换组件的感觉

当我点击半年时，年的组件就会被隐藏，同区域出现半年的组件

就这样啦

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

圆碌碌一口吃两个

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue+antd上传组件（Upload）的简单案例

菜鸟小筑

06-30

6935

使用antd的Upload组件自定义上传功能，包含上传、文件验证、回传（成功/失败）；

13、通过子组件实现对话框的打开

weixin_51915021的博客

05-12

1074

Vue3 + .net core6 WebAPI前后端分离

参与评论您还未登录，请先登录后发表或查看评论

vue 创建隐式组件结果提示组件

liuhao9999的博客

05-07

4091

调用方法： this.$Result.init({ title:"标题", subTitle:"副标题", type:'success', append:"内容补充", btns:[ { name:"确定", ..

Vue隐式创建实例

Myinlg的博客

07-18

1270

在 webpack 中，我们都是用 .vue 单文件的模式来开发，每个文件即一个组件，在需要的地方通过 components: {}来使用组件。比如我们需要一个上传组件，你可能会这样实现： <template> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/...

antd-vue实现table表单动态选择筛选列的显示隐藏组件

qq_39532524的博客

05-17

2574

鼠标移入弹出所有表单项标题，选择可以动态筛选表单列的功能。

vue中elementUI上传一张图片后，隐藏上传按钮

weixin_43835827的博客

04-20

4177

效果图：上传图片前有上传按钮上传一张图片后，隐藏上传按钮我用的是是手动上传的照片墙组件 1.data里面初始值： hideUpload: false, 2.el-upload里面绑定一个占位class： :class="{hide:hideUpload}" 3.onChange里面（文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用）： this.hideUploa...

react antd 有多个Popover气泡卡片手动控制显隐

sw_onload的博客

06-20

8913

有个需求要实现点击批量复制输入复制数量，点确认复制当前行，点取消隐藏气泡框。用对话框的话显得大材小用，毕竟只有一个输入框，而Popover气泡卡片正好可以满足需求而且占用面积小。因为里面添加了自定义的确认、取消按钮，所以需要手动控制气泡框的显隐，那么问题来了。当给定一个值来控制显隐时，是完全不够的，这样会造成所有气泡框会同时出现。官方文档只演示了只有一个气泡卡片的例子，当然可以直接给state一个visible来控制显隐，而要控制多个，则需要定义第二个值来配合这是官方文档里的例子 import { Po

[ant design vue] 关于ant design vue 表单报错合集

m0_59697051的博客

02-16

2464

情况一：当我点击新增时会报以下错误：原因是我在使用v-decorator的同时使用了v-model，如下图：解决方案就是：把v-model删掉，需要动态获取值，可以通过: this.form.getFieldValue('fa_No') 情况二：当我点击编辑时会报以下错误：原因是我在点击编辑给表单赋值时，值不是一对一赋值，而是一次性赋值导致一些在表单中没有写的参数，但是record中有，赋值只能少不能多所以导致报错了，如下图：解决方案就是使用this.form.setF..

vue3项目中最简单的拖拽实现节点位置变化

热门推荐

景严-的博客

08-19

3万+

如图，为要实现的需求，即右键table的表头弹出菜单栏，通过勾选多选框的内容来控制表格列的显示和隐藏。 1. HTML部分（elemen-ui）： <el-table :data="list" border fit @header-contextmenu="contextmenu"> <el-table-column v-if="colData[0].istrue" l...

前端框架Vue学习04——v-if和v-show的使用

qq_37607502的博客

10-12

210

v-if:每次都会重新删除或者创建元素，有较高的切换性能消耗 v-show:每次都不会重新进行DOM的删除和创建操作，只是切换了元素的display:none样式，有较高的初始渲染消耗异同：如果元素涉及到频繁的切换，最好不要使用v-if,而是使用v-show,如果元素可能永远不会显示出来被用户看到，则推荐使用v-if. <body> <div id="app"> ...

antd+vue——实现按钮始终固定在顶部，且根据权限的不同控制按钮组件的显示与隐藏——技能提升

yehaocheng520的博客

12-21

2020

antd+vue——实现按钮始终固定在顶部，且根据权限的不同控制按钮组件的显示与隐藏——技能提升

react组件显示隐藏切换效果

业余前端爱好者

05-16

1万+

这段时间开始接触react,之前陆续五个月的vue开发,考虑公司项目日益庞大,决定后期使用react 作为小小白,也是在不断学习成长,还望老司机勿喷

antd如何隐藏Upload组件的删除和预览图标

博哥的二进制世界

07-08

9932

antd如何隐藏Upload组件的删除和预览图标如下所示，当Upload组件文件上传成功后，默认会出现预览和删除的图标如果我们不想显示这两个图标，应该如何操作呢？官方文档上有如下介绍：通过设置Upload组件的showUploadList属性下的showPreviewIcon, showRemoveIcon, showDownloadIcon，即可控制预览图标、删除图标、下载图标的展示和隐藏比如，我要隐藏Upload的预览图标详细代码如下： <Upload action={actio

antd源码解析（一）button控件的解析

飞天代码的博客

07-24

7687

'use strict';Object.defineProperty(exports, "__esModule", { value: true });var _extends2 = require('babel-runtime/helpers/extends');var _extends3 = _interopRequireDefault(_extends2);var _defineProper

antdPro table设置隐藏

weixin_45204463的博客

03-24

2236

如图例如我们想去掉新建按钮之后的那些属性代码如下需要在ProTable 下加入 options={false} 这句话就可隐藏工具栏模块功能呢如果新建也不需要直接在代码中把新建代码模块代码直接删除就好大家有什么关于antdPro 组件的问题可在下方留言 ...

antd实现点击按钮隐藏输入框_React怎样实现点击其他地方隐藏弹出的菜单

weixin_35251837的博客

01-13

958

我们经常遇到这种需求: 点击导航栏弹出菜单, 点击其他地方收回菜单.前者比较容易实现, 在onClick中可以设置state, 通过state来判断组件的className进而实现菜单组件的显示与隐藏.后者, 点击其他地方收回菜单, 应该怎么弄呢?比较好的实现方法步骤如下:在componentDidMount()中添加document的监听事件, 监听全局的clickcomponentDidMou...

v-for遍历数组使用v-if或者v-show动态显示某个组件

、Edgar的博客

05-12

923

我是在antdv的a-list中间使用的，类似与一个v-for <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData" :locale="{ emptyText: '暂无回答' }" :loading="loading" >

使用vue3+antd+ts创建一个弹窗组件的代码

09-11

在Vue3中使用Antd和TypeScript创建一个弹窗组件的代码如下： ```html <antd-popover trigger="click" title="弹窗标题" :visible="visible" @visible-change="handleVisibleChange" > 弹窗内容 <antd-...