iview 的Cascader 清空

已于 2022-09-22 10:41:24 修改
阅读量2.6k 收藏 2
点赞数 2
文章标签： view design
于 2019-10-24 11:35:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanghuan93/article/details/102719898
版权

看到源码里有一个的清空按钮上有一个 clearSelect 方法

<Icon type="ios-close-circle" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>

所以在项目里使用的时候给Cascader 加个ref 然后调用清空方法

 <Cascader  ref="address"></Cascader>

 this.$refs.address.clearSelect()

如果调用不起作用,可能是版本不一样事件名称变了,就去node_modules里的iview里找到Cascader这个组件的源码,看看调用的是哪个事件,调用一下就行了

在路上_w
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Vue开发实战四：Cascader 级联选择器的使用
博主逸尘
12-30 4297
文章目录1. 页面最终展示2.获取数据及组件选择3.组件引用及Demo实现4.调试数据适配组件5.配置组件属性适配数据6.组件数据获取 1. 页面最终展示 按需求要求只能选择第三级的数据，并且数据不超过三级，点击了第三级列表自动增加一条数据 之前做的类似的功能新增及列表功能如下： 2.获取数据及组件选择 很多情况下我们获取到的数据并不符合我们的需要，因此需要我们处理下，当然这个工作可以交给后端，我前端要啥样的数据你就需要给我提供什么样的数据，先看下最初我们获取的数据如下： 数据处理这里先不说，后面
vue iview table实现全选
qq_37635012的博客
04-08 456
【代码】vue iview table实现全选。
iview的Cascader回显值赋不上
weixin_44481113的博客
07-13 393
【代码】iview的Cascader回显值赋不上。
iview Cascader 清除选项的回调事件
Continuetofantasy的专栏
07-18 1201
api 文档里没找到的清除事件 , 自己摸索写的一部分 template: <Cascader :data="this.$parent.deptlistdata" @on-change="deptchange" clearable ref="deptCascader" ></Cascader> methods: //选择部门 deptchang...
iview(view-design)cascader级联选择器的change-on-select和load-data一起使用的问题
最新发布
xiaowu0929的博客
07-08 258
开发过程中用到cascader时，既希望能够选中任意一级又想使用动态加载接口，于是就出现了一种情况：设置了一个默认值比如为"浙江省/杭州市/拱墅区/米市巷街道/米市社区"，但是cascader组件初始化后，就变成了"浙江省/杭州市"，后续那些依靠动态加载接口查找的内容就没有了。
antd中的Cascader级联选择框怎么清空重置React
qq_54455551的博客
07-26 2191
React项目，antd中的级联选择框重置问题
iview中Cascader组件的坑
qq_40313245的博客
01-15 1万+
1. Cascader 数据格式要求 只认识这种结构的，所以拿到数据要处理下 2. change-on-select 任意选择 v-modal 要绑成 [1, 3] 如果不使用change-on-select， [1] 是渲染不了的。 3. on-change 事件，很傻 on-change有两个默认值， 但是我们想自己插值的话，这两个默认值就没了 比如：使用了v-for循环要插入inde...
iview表格嵌套复选框 进行选择删除
前端技术大牛
04-01 3678
表格中加入select的事件 <!-- 表格 --> <Table border stripe :columns="columnsData1" :data="datalist" @on-selection-change="selectList"></Table> 放置select的位置 { type: 'selection',...
iview select选中值取值_iView的Select选择框
weixin_39922147的博客
12-20 3041
目录在此先列出解决了那些问题，以防读者看完了没有用处：1、示例，最基础的使用方法2、传参，传多个值的方式3、默认值4、清空重置无效5、可搜索的用法及如何限制搜索字符长度一、示例html:{{item.name}}js:data: {formSend: {name: '',code: ''},dataList: [{id: 1,name: '中国',code: 'china'}]},methods:...
element ui 清除级联选择框选中状态（cascader）
少年一贯快马扬帆，道阻且长不转弯。要盛大，要绚烂，要哗然，要用理想的泰坦尼克，去撞现实冰川。要当烧赤壁的风，而非借箭草船，要为了一片海，就肯翻万山。
03-20 1472
<el-form-item label="客户" prop="regionId"> <div class="block"> <el-cascader ref="cascaderClassroom" v-model="optionsValue" :options="options" :props="{ value: 'id...
工作中对 Vue 和 iView/Element 的一些技术备忘总结
汤一飞
05-19 5061
如题
中国地址选择xml 文件
wmnh123的专栏
09-07 1563
<root <province name="安徽省"> <city name="安庆市"> <district name="枞阳县" zipcode="246000" /> <district name="大观区" zipcode="246000" /> <district name="怀宁县" zipcode="246000" /> <d
iview刷新之后导航菜单仍然高亮
weixin_44813417的博客
11-16 265
⚠️这里使用了route.name，因此需要注意的是路由中的name和MenuItem中的name相互对应。
iview 级联选择组件_iview Cascader级联选择省市区问题
weixin_39654436的博客
12-22 1363
vue项目中，用到了iview的Cascader级联选择省市区，之前用的是iview-area这个插件做的省市区下拉选择，没啥大问题，就是选择省市区后，屏幕会抖动一下，体验不好，又找不到解决办法，之后重新选择了iview中的CascadergetArea (value, selectedData) {const areaName= selectedData.map(item =>item.l...
Element-UI Cascader组件 清除按钮位置的修改
ANTINODE的博客
10-20 3760
Elementui的级联选择器里有一个清空选项按钮，但缺点和是下拉的icon放在同一个位置，本文介绍如何优化清除按钮的位置
iview利用Cascader 组件实现级联选择功能
ljxbbss的博客
08-13 4951
后台需要做省市区三级联动选择的功能，以前都用的是select组件，这次想和shop一样，用Cascader 这个组件去实现一把 网上找了许多代码，都不是特别完善，正好自己写出来了，就记录一下，以后可以用到。 <span style="margin-bottom:200px;" class="controlText">楼盘地址：</span><form-item prop="spuAddresses"> <Cascad
antd 级联选择器 Cascader 使用之 清空重置
m0_37148591的博客
05-07 1万+
前言 日常积累，欢迎指正 代码段 cascaderValue: string[] <Cascader options={options} onChange={this.onCascaderChange} placeholder='请选择查询区域' value={this.state.cascaderValue} /> /** * 当 cascaderValue...
iview 级联选择组件_基于iView-Cascader的多选级联选择器
weixin_39683526的博客
12-22 1813
一次Vue项目中需求本来是单选的级联选择器,本来很简单因为iView组件里有,结果产品更改需求到要求实现Vue多选级联选择器,先在网上找了一下想偷个懒结果发现没有,所以这算奇葩需求吗 hahcascader-multi效果预览install 安装npm i cascader-multi --saveuse 使用在main.js中写入下面的代码import cascaderMulti from "c...
Cascader 级联选择（详解）
热门推荐
日常笔记/总结/系列知识梳理
05-24 4万+
Vue.js 是一个渐进式的 JavaScript 框架，被设计用来构建用户界面。与其他重量级框架（如 Angular 或 React）相比，Vue.js 提供了更简单、更灵活的 API，使得你可以在各种项目中灵活使用。
iview select 多选怎么清空
05-25
要清空 iView Select 组件的多选，可以通过以下两种方式实现： 1. 代码方式： 可以通过给 Select 组件的 v-model 绑定一个空数组来清空多选： ```html <template> <Select v-model="selectedOptions" mode="multiple"> <!-- options --> </Select> <Button type="primary" @click="clearSelectedOptions">清空</Button> </template> <script> export default { data() { return { selectedOptions: [] } }, methods: { clearSelectedOptions() { this.selectedOptions = [] } } } </script> ``` 2. UI 操作方式： 点击 Select 组件右侧的清空按钮可以清空多选。 ```html <template> <Select v-model="selectedOptions" mode="multiple" clearable> <!-- options --> </Select> </template> <script> export default { data() { return { selectedOptions: [] } } } </script> ```
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值