Element el-cascader清空几种方式

已于 2024-01-10 09:18:04 修改
阅读量1k 收藏 8
点赞数 9
文章标签： 前端 javascript vue.js
于 2024-01-10 09:17:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53120043/article/details/135494746
版权

清空选中的节点

this.$refs.cascader.$refs.panel.clearCheckedNodes()

高亮清除

this.$refs.cascader.$refs.panel.activePath = []

打印一下this.$refs.cascader.$refs.pane还有其他参数，有需要也可以改。

手动触发达到清除clearable效果

this.$refs.cascader.handleClear({})

渲染清除

使用v-if绑定到级联选择器，重新渲染来触发清除。

年年7
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-plus---Cascader三级联动地区选择---json数据
08-19
适用于element-plus 的 Cascader三级联动地区选择---json数据，
Vue使用Element的级联选择器Cascader清空事件
coldriversnow的专栏
04-01 644
3、如何在点击级联选择器本身的那个×后，调用某个方法（或进行某个步骤）在级联选择器@change绑定的方法中设置监听，即。这个就是监听有没有点击级联选择器的清空那个图标。即可，这个clear是清空按钮绑定的方法。2、在要清空的函数方法中。
element el-cascader 级联选择器取消选中某一项
weixin_44099519的博客
04-24 193
应公司需求，在部门选择的时候，需要控制父子级不关联，且子级不能全选，选择最后一个的时候给出提示并清空当前选项。这样就可以实现，选了不符合需求的节点，给出提示，清空选项。
elementUI Cascader 级联清空选中节点
疑问 搜索 动手 解决 记录
02-04 2524
给cascader组件设置一个ref // 清空级联选择器选中状态 this.$refs.cascader.$refs.panel.clearCheckedNodes() // 清除高亮 this.$refs.cascader.$refs.panel.activePath = [] 还有一种 let obj = {} obj.stopPropagation = () =>{} try{ this.$refs.cascader.clearValue(obj) }catch(err){
elementui el-cascader 清除级联选择框选中状态
qq_44981128的博客
11-18 1339
<el-cascader ref="cascader" v-model="optionsValue" :options="options" :props="Options" @change="handleChange" clearable> </el-cascader> 重置methods reset (...
el-cascader 级联选择器清空初始化
灰色头像@的博客
03-22 2121
级联选择器在清空了输入框之后，需要同时清空弹框里面的选中样式、高亮、以及回归初始化状态只展开一级菜单：【图1 变 图2】
el-cascader层级控件使用详细，clearable删除旧项（el-cascader使用clearable，完全清空，删除旧项）
weixin_65793170的博客
11-24 3978
【代码】el-cascader层级控件使用详细，（el-cascader使用clearable，删除旧项）
清除el-cascader中的数据
qq_42586147的博客
07-06 3192
清空el-cascader
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的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
实现el-cascader组件点击文字即选中效果
最新发布
05-30
实现el-cascader组件点击文字即选中效果
如何为element-ui的Select和Cascader添加弹层底部操作按钮
12-28
如下图这样把操作按钮放在 select 弹层底部是一种挺常见的设计方式 但是很遗憾 element-ui 没有给我们提供这个插槽，我们想实现这个功能只能重写组件或者等官方更新吗，答案当然是否定的！ 花了一点时间通过一个...
详解为element-ui的Select和Cascader添加弹层底部操作按钮
10-15
主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element 清空el-option和清空el-cascader
深圳最菜前端
05-18 8589
在vue管理后台页面，增删查改算是常见的需求了，为了偷懒，很多人都会只写一个弹窗，在这个弹窗里面完成新增和修改操作，所以，点击提交的时候清空下拉框数据，就成了必要 案例： // html <el-option v-for="item in stores" :key="item.id" :label="item.name" :value="item.id" style="height:68px" > <div>{{ ite
Vue使用Element的级联选择器Cascader，在方法中清空选项
小钻风的博客
08-21 7847
最近使用vue写项目，用到的是ELement的框架，项目中有个地方用到了级联选择器，好多东西直接在官网都找不到。 我要实现点击清空以后，去调用一个和点击下拉选项不一样方法，做这个功能的时候，也找到了如何在方法中清空级联选择器的选项。 官网上只说明了想要清空级联选择器只需要添加一个clearable 原理就是在级联选择器上面绑定一个监听 1、首先添加一个 ref="cascaderHandle" 和clearable 2、在要清空的函数方法中this.$refs.cascaderHandle.checke
element Cascader 级联选择器 回显以及清空
曳猫的博客
09-17 1441
element Cascader 级联选择器 回显以及清空。
element-ui cascader 重置按钮触发清空操作
Sicily_winner的博客
07-13 6904
前言 有时候我们的提交表单会存在重置操作，那么会重置element-ui中的联级选择器，如果你是自定义组件的联级选择器，你会发现无法清空的情况，实际上你已经在父页面的reset方法中已经重置了下拉组件为空，但是页面上依旧残留着文字，如下图所示： 当点击重置按钮之后，新版用途文字虽然存在，但是已经和后面的clearable触发之后的结果是一样的！！ 也就是点击重置按钮的结果是我们想要的，但是页面上的文字是我们想要弄掉的。 那么我们的问题就是如何把页面上的文字清空掉！ 因为我这个下拉组件是子..
element-plus el-cascader 级联组件清空所选数据方法
Taurus_666
10-12 1456
elementplus 级联组件一键清空所选值
清空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" ...
vue2 element el-cascader tree
08-18
你可以使用 Vue 2 和 Element UI 的 el-cascader 组件来实现树形级联选择器。先，确保你已经安装了 Vue 和 Element UI，并在你的项目中引入它们。 接下来，你需要准备一个树形数据源，用于填充 el-cascader 组件。你可以使用递归的方式来构建树形数据结构。例如，假设你的树形数据如下所示： ```javascript [ { value: '1', label: '一级 1', children: [ { value: '1-1', label: '二级 1-1', children: [ { value: '1-1-1', label: '三级 1-1-1' }, { value: '1-1-2', label: '三级 1-1-2' } ] }, { value: '1-2', label: '二级 1-2' } ] }, { value: '2', label: '一级 2', children: [ { value: '2-1', label: '二级 2-1' }, { value: '2-2', label: '二级 2-2' } ] } ] ``` 然后，在你的 Vue 组件中使用 el-cascader 组件，并将树形数据源绑定到 options 属性上： ```html <template> <el-cascader v-model="selectedValues" :options="treeData" :props="{ value: 'value', label: 'label', children: 'children' }" ></el-cascader> </template> <script> export default { data() { return { selectedValues: [], // 用于存储选中的值 treeData: [/* 树形数据源 */] }; } }; </script> ``` 这样，你就可以在 el-cascader 中选择树形数据，并通过 `selectedValues` 属性来获取选中的值。 注意，`el-cascader` 组件还有其他可用的属性和事件，你可以根据自己的需求进行配置和使用。具体的用法和更多的示例可以参考 Element UI 的官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值