利用iview的Poptip组件和Tabs组件实现省市联动

最新推荐文章于 2023-08-03 16:39:56 发布
最新推荐文章于 2023-08-03 16:39:56 发布
阅读量587 收藏
点赞数
文章标签： vue javascript vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43611484/article/details/121033308
版权

引言

这周的需求中，在查询的列表的数据的时候，要实现这样的类似的省市选择：
在这里插入图片描述
最后实现为：
省市联动

实现过程

在这里插入图片描述

  • Poptip里面一个input和div的插槽，插槽里面是Tabs组件，Poptip组件和tabs组件的用法不在这里论述了
  • 然后给每个省的span加上点击事件进而获取该省的数据和显示到input中，给市的数据加的点击事件同理

逻辑如下：

在这里插入图片描述

  • 选择省，给表单赋值数据同时在input框显示省，然后请求该省的市的数据。
  • 选择市，在input框里拼接好数据
  • 这里监听提示框的显示以及显示的次数，是因为在input框内拼接字符串的时候会发生错误
  • tab组件中有一个activeKey属性是控制tab组件显示哪个TabPane，其值是TabPane的name值。如果有小伙伴想选省完自动移到选市的tabPane中可以利用一下这个属性.
长安有故里，安河桥有你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
iView中的Select与Poptip结合
熙冰
02-21 876
<template> <div class="selectPopTip"> <Button type="primary" @click="clickBtn">打开对话框</Button> <Modal title="对话框" :styles="{top: '20px'}" v-model...
基于vue、iview实现tree组件可拖拽、双击编辑
09-23
在这个场景下，我们将探讨如何利用Vue和IView实现一个具有拖拽和双击编辑功能的Tree组件。 首先，让我们了解一下`Tree`组件。在Web应用中，`Tree`组件通常用于展示层级关系的数据，如文件系统、组织结构等。IView中...
iview poptip 外部input的实现
weixin_43972213的博客
12-27 410
在开发中，我们期望带有poptip的input可以占满100%的宽度（图1），但实际使用的时候poptip包含组件的方法，会发现并没有达到期望的效果（图2） 图1 图2 解决方案：将input移出 <template> <br> <br> <Row> <Col span="8" style="border:1px solid #bed742;"> <Input v-model="value1" :aut
vue自定义指令poptip的弹窗的代码
qq_38946996的博客
09-02 980
自定义指令源码 import Vue from 'vue' Vue.directive('poptip', { inserted: function (el, binding, vnode) { //获取元素的纵坐标（相对于窗口） function getTop(e) { var offset = e.offsetTop - e.scrollTop; if (e.offsetParent != null) offse.
利用级联选择器实现省市区三级联动【vue + elementUI Plus | uViewUI】
qq_36687211的博客
03-29 7157
利用级联选择器实现省市区三级联动
iview的日历组件，iview的日历组件
02-01
- 结合 `iView` 的其他组件如 `TimePicker` 和 `DatePicker`，构建更复杂的日期时间选择器。 - 通过 `slots` 进行自定义扩展，例如在日历的特定日期上添加额外信息或操作按钮。 6. **实际项目中的应用** - 在...
vue iView 上传组件之手动上传功能
08-27
iView的上传组件 `<Upload>` 提供了多种配置项，如`multiple`、`before-upload`、`show-upload-list`、`on-success` 和 `action`等，这些参数和方法有助于实现各种自定义功能。 1. **multiple**：这个属性用于设置...
Iview Table组件中各种组件扩展的使用
10-17
在本文中，我们将深入探讨Iview Table组件中的各种组件扩展，以及如何在实际应用中实现多选框选中与禁选设置，以及在Table组件中点击Icon弹出Poptip的两种方法。Iview Table是基于Vue.js的UI组件库，提供了丰富的...
Vue配合iView实现省市二级联动的示例代码
10-18
本篇文章将详细讲解如何利用Vue和iView来实现省市二级联动的效果。 首先，二级联动的基本思路是：当用户在一级列表（省份）中选择一个选项时，二级列表（城市）会根据所选省份自动更新。这里，我们用iView的Select...
基于vue+iview实现省市区三级联动
哈哈hyc的博客
04-23 1744
表单关键代码 <FormItem prop="province" label="省份"> <Select v-model="formValidate.province" placeholder="请选择省份" @on-change="changeProvince"> <Option v-for="(item,index) in provin...
iview Poptip组件，内容超出固定宽度不换行，解决方法
weixin_44111864的博客
03-22 1361
bug场景： 今天在做表格内容超出时,鼠标滑过进行tip提示，选用的是Poptip组件，设置了width='350'和word-wrap=true,输入过多数字或字母，发现内容不换行，打开控制器，发现设置的word-wrap属性没有生效 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021032217494538.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_a
vue 基于iview的多选和Tag标签的融合
weixin_49535676的博客
04-25 372
需求如图 项目demo演示地址https://run.iviewui.com/5NOmf41O 废话不多说，上代码直接 <template> <div> <span>已选择</span> <div id="chatContainer" class="tagWrap mg-tp-10"> <Tag class="modalTags" ...
iview 在Table组件中使用Poptip组件且按钮样式正常展示
ANDYSKYER的专栏
04-18 5179
h('Poptip', { props: { confirm: true, title: '确定要删除吗！' }, on: { 'on-ok': function(){ console.log('you clicked ok.'); }, 'on-cancel': fun...
iview的table中点击Icon弹Poptip,render函数的写法
weixin_30940783的博客
01-27 281
render: (h, params) => { 　　　　　　　　　　　　　　return h('div', [ h('div', [ h('Poptip', { props: { ...
iview在render函数中添加Poptip提示
浩星
01-21 2359
前言： 在使用iview的table的时候删除一般为了防止误删，我们会用 poptip 气泡提示来进行操作二次限制，这里使用iview的table的render函数渲染直接加入 效果图： 实现代码： 具体功能代码： //加上气泡 h('Poptip', { prop...
iview中使用render函数渲染poptip，poptip使用插槽插入组件，简单实现组件渲染
qq_42797577的博客
04-23 3685
iview的table中使用render函数可以渲染iview中的各种插件， 如气泡提示等功能，如果继续使用render渲染dom，会提高代码的复杂度。所以可以直接使用插槽，把组件独立出来。 首先熟悉render的格式 render: (h, params) => { return h('Poptip', { class: 'xxx', props: { place...
解决iview的poptip组件内使用datePicker组件,在选择时间后会关闭poptip组件
风如也的博客
08-03 414
`poptip`组件内使用了`datePicker`组件，在`datePicker`组件选择时间后关闭时间弹框的同时也会关闭`poptip`的弹窗。
iview 在Table组件render 中使用Poptip组件 阿星小栈
阿星小栈
04-26 1174
render: (h, params) =&gt; { return h('div', [ h('Button', { props: {type: 'error', size: 'small'}, ...
iview poptip v-for
最新发布
11-09
iViewUI的Poptip时，可以通过v-for指令来渲染i-table。需要注意的是，在Poptip内渲染超过两行的i-table时，会出现迷之错误：采用hover方式唤起Poptip时，鼠标第一次移上去时Poptip的弹出位置会出现较大偏移，第二次...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值