element-ui cascader 重置按钮触发清空操作

最新推荐文章于 2024-06-04 08:06:17 发布
最新推荐文章于 2024-06-04 08:06:17 发布
阅读量6.9k 收藏 5
点赞数 1
分类专栏： vue 文章标签： cascader清空 父组件调用子组件 cascader父页面清空
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sicily_winner/article/details/107318807
版权

  • 前言

有时候我们的提交表单会存在重置操作，那么会重置element-ui中的联级选择器，如果你是自定义组件的联级选择器，你会发现无法清空的情况，实际上你已经在父页面的reset方法中已经重置了下拉组件为空，但是页面上依旧残留着文字，如下图所示：

当点击重置按钮之后，新版用途文字虽然存在，但是已经和后面的clearable触发之后的结果是一样的！！

也就是点击重置按钮的结果是我们想要的，但是页面上的文字是我们想要弄掉的。

那么我们的问题就是如何把页面上的文字清空掉！

因为我这个下拉组件是子组件叫做（enum-cascader），而当前父页面叫做（gszd-t

最低0.47元/天 解锁文章
winner_corl
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementui el-cascader 清除级联选择框选中状态
qq_44981128的博客
11-18 1378
<el-cascader ref="cascader" v-model="optionsValue" :options="options" :props="Options" @change="handleChange" clearable> </el-cascader> 重置methods reset (...
el-cascader 加上filterable 和clearable 后出现2个清除icon解决方案
Sindy的博客
07-21 712
el-cascader v-model="citys" @change="handleChange" :options="cityList" collapse-tags clearable filterable placeholder="登录城市" class="login-city" ></el-cascader>
【区分vue2和vue3下的element UI Cascader 级联选择器组件，分别详细介绍属性，事件，方法如何使用，并举例】
最新发布
xiejunlan的博客
06-04 677
在Vue 2的Element UI和Vue 3的Element Plus中，（级联选择器）组件用于从嵌套的数据中进行选择。以下是对这两个版本下组件的属性、事件和方法的详细介绍，并附带示例。
el-cascade入门学习
qq_40765784的博客
05-16 3393
学习内容 1.el-cascade的使用, 其中v-model对应的是数组，options中的key值固定，若label,value,children,disabled 2.@change方法的方法参数对应选择的级联的value数组 3.:props="{expandTrigger:'hover'}"触碰选项可展示出子选项，无需点击 4.clearable实现清空数据 5.:show-all-levels='false'实现只显示叶子节点值 6.:props="{multiple:true}"实现可以多..
el-select标签设置了clearable属性，但是不出现清除按钮 以及el-table合计功能滚动条层级问题
Gewenjuan_0309的博客
09-14 2169
最近做项目，公司要求在表格中加入“合计”行。查看element文档后使用自定义方法进行添加。添加后页面中，合计行在横向滚动条下方。这里要的滚动条是整个table的滚动条，所以将表头、表内容、表尾的滚动条设为visible。导致出现这个问题的原因是：此时的滚动条是表内容的滚动条。而合计行是属于表尾。解决办法：value正确使用接口返回的字段值。
element-ui —Cascader 级联选择器（选中方式处理）
weixin_43742167的博客
08-03 6495
element-ui —Cascader 级联选择器点击文本实现选中
element-ui 级联选择器el-cascader踩坑
秋实的博客
06-10 2463
el-cascader 级联选择器 下拉选项选中不刷新；数据回显慢；
如何为element-ui的Select和Cascader添加弹层底部操作按钮
12-28
但是很遗憾 element-ui 没有给我们提供这个插槽，我们想实现这个功能只能重写组件或者等官方更新吗，答案当然是否定的！ 花了一点时间通过一个函数实现这个功能，支持 el-select 和 el-cascader , 效果点击预览 ...
详解为element-ui的Select和Cascader添加弹层底部操作按钮
10-15
通过这种方式，我们可以轻松地为Element UI的`el-select`和`el-cascader`组件添加自定义的弹出层底部操作按钮，提升用户体验。这个方法的核心是利用Vue的生命周期和DOM操作来实现动态插入和绑定事件，使得组件功能...
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
element-ui.rar element-ui核心库压缩包
12-20
这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要工具。 Element UI 的设计理念是简洁、易用，它的组件设计遵循 Material Design 规范，同时考虑到国内用户的...
el-cascader设置默认全部
yy_demo的博客
10-09 1472
clearable是用来设置是否支持清空选项，checkStrictly用来设置是否严格的遵守父子节点不互相关联。下拉项赋值之后可以再添加一个首项，lable为全部。在data中给绑定的数据添加一个默认值为空字符串即可。然后你就会发现这个级联选择框有一个默认值为全部。
el-cascader 级联选择器清空初始化
keke11211的博客
09-28 6212
需求： 级联选择器在清空了输入框之后，需要同时清空弹框里面的选中样式、高亮、以及回归初始化状态只展开一级菜单：【图1变 图2】 解决办法： 判断输入框为空值之后做以下操作恢复到初始化状态： this.$refs.myCascader.$refs.panel.checkedValue=[];//清空选中值 this.$refs.myCascader.$refs.panel.clearCheckedNodes();/...
el-cascader重置级联面板
熙冰
08-19 1720
<template> <div class='cascaderRecovery'> <el-cascader v-model="value" :options="options" ref="cascaderRef" @visible-change="handleVisibleChange" clearable> </el-cascader> .
隐藏elemeent-ui中日期选择器的清空按钮,清空图标
gxh0816的博客
12-23 6567
问题: 今天上班时需要解决一个,日期选择器里面的清空图标及清空按钮的隐藏(不可用) 首先是图标如何隐藏呢? 所以只需要在日期时间选择器标签里面写上这个属性为false就好了 那么隐藏清空按钮怎么写呢? 想法来自于 https://blog.csdn.net/qq_41648113/article/details/109614918 但是我写了没用,让我就重新写了一个style标签,和我一样没有效果的可以参考. .el-picker-panel__footer .el-picker-panel__li
element之Cascader 级联选择器（获取当前选中的id值对应的整个对象）
苗条的胖子的博客
03-25 3810
html部分： <el-cascader clearable :change-on-select="true" class="ml10" :options="chanceSourceType" v-model="chanceSourceArr" @active-item-change="chanceSourceChangeHandle" @change="chanceSourceChangeHandle" :props="props" :placeholder="defaultPlaceholder"
清空el-cascader的所选内容（vue+element ui）
weixin_45298700的博客
10-28 1万+
点击清空筛选项按钮清空el-cascader的所选内容 html <el-cascader style="width:160px;" clearable emitPath="true" v-model="form.goodsClassfiyList" ...
element-ui之级联选择器(Cascader)的使用详细过程
热门推荐
itboy
01-21 10万+
使用element-ui级联选择器：     从后台获取数据的过程:参考-------&gt;java从数据库中读取数据-生成菜单树tree之算法优化     第一步：从后台获取json数据：获得数据类似于下列json [ { "id": 1, "createTime": null, "updateTime": null, "name": "特产 / 食...
elementUI级联选择器（Cascader）回显问题和clearCheckedNodes无效的解决方法
weixin_40235831的博客
04-09 1万+
Cascader第二次绑定值时，下拉框里选项高亮样式仍显示上一次绑定值时的状态 这个问题百度过没有人问，在el-cascader和el-cascader-panel中都有出现，终于在element的git issus中找到了解决方法，现在搬运过来 问题复现 第一次进入编辑页面的回显正常的情况 接着当我打开新增页面的时候，就会出现高亮样式仍显示上一次绑定值时的状态 或者打开另一样商品的编辑 回显...
element-ui cascader根据后端给的数据回显
06-01
要根据后端给的数据回显element-ui cascader，需要将后端返回的数据转换成element-ui cascader要求的格式。具体步骤如下： 1. 获取后端返回的数据，假设数据格式如下： ```json [ { "value": "1", "label": "一级分类", "children": [ { "value": "11", "label": "二级分类1" }, { "value": "12", "label": "二级分类2" } ] } ] ``` 2. 根据element-ui cascader要求的格式，将数据转换成如下格式： ```json [ { "value": "1", "label": "一级分类", "children": [ { "value": "11", "label": "二级分类1", "children": [] }, { "value": "12", "label": "二级分类2", "children": [] } ] } ] ``` 注意，要将二级分类的children设置为空数组，否则element-ui cascader无法正确显示。 3. 将转换后的数据赋值给cascader组件的options属性即可实现回显。 ```html <el-cascader v-model="selectedOptions" :options="options"> </el-cascader> ``` ```js export default { data() { return { selectedOptions: [], // 选中的选项 options: [] // 树形结构数据 } }, mounted() { // 获取后端数据并转换格式 const data = [ { "value": "1", "label": "一级分类", "children": [ { "value": "11", "label": "二级分类1" }, { "value": "12", "label": "二级分类2" } ] } ] this.options = this.transformData(data) }, methods: { // 转换数据格式 transformData(data) { return data.map(item => { if (item.children && item.children.length) { item.children = this.transformData(item.children) } else { item.children = [] } return item }) } } } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值