vue3+ant3点击“重置”按钮取消选中左侧树选中节点

最新推荐文章于 2024-06-18 21:58:37 发布
最新推荐文章于 2024-06-18 21:58:37 发布
阅读量939 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue3-搭配ant design vue 文章标签： 前端 anti-design-vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_53821346/article/details/130783835
本文记录了在Vue3项目中，使用Ant Design Vue库，如何实现在点击右侧表格的‘重置’按钮后，取消左侧树形结构中选中节点的过程。主要步骤包括：在树节点组件添加setSelectedKeys方法，右侧表格页面定义ref引用树组件，编写获取树选中状态的函数，以及实现重置方法来清除选中状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在公司项目中有一个页面功能是由左侧树页面，右侧表格页面组合成，然后要能点击右侧表格页面的“重置”按钮也能取消选中树节点的选中，实现过程记录如下：

首先要在公共的树节点页面添加一个setSelectedKeys，判断是否选中接收

(1) 接下来到右侧表格页面首先定义一个ref（自己自定义命名）给所引入的tree页面使用

 (2)导入后续需要的ref、unref

（3）定义一个跟ref接收同名的

 （4）定义一个获取树选中的函数，用于判断是否选中还是清空选中

（5）将跟ref接收同名的通过return暴露返回

最低0.47元/天 解锁文章

200万优质内容无限畅学
vue3+ant design vue 实现Tree树形控件带搜索库并可关键字搜索筛选功能，Antd组件库a-tree可搜索的树展示搜索结果并展开（根据关键字搜索过滤tree树列表数据，详细示例代码）
高级前端工程师
05-08 4894
Vue3 AntDesign可搜索的树（只展示搜索结果并展开）vue3+antd使用andt-tree实现可搜索的tree_antd选择树搜索，vue3项目Antd 实现Tree树形控件带搜索功能，支持搜索展开tree，antd-tree组件带搜索框，Ant Design Vue3组件Tree树形控件，Tree组件实现可搜索的树，ant.design组件库中的Tree组件实现可搜索的树，树控件的搜索功能，antd Tree 组件 带搜索，动态list数据，tree嵌套数据，搜索后关键字标红，具备搜索功能的树
vue+ant design vue - 实现Tree树形控件带搜索库并可关键字搜索筛选功能，Antd组件库a-tree可搜索的树展示搜索结果并展开（根据关键字搜索过滤tree树列表数据，详细示例代码
最新发布
高级前端工程师
05-06 4297
Vue AntDesign可搜索的树（只展示搜索结果并展开）vue+antd使用andt-tree实现可搜索的tree_antd选择树搜索，vue项目Antd 实现Tree树形控件带搜索功能，支持搜索展开tree，antd-tree组件带搜索框，Ant Design Vue组件Tree树形控件，Tree组件实现可搜索的树，ant.design组件库中的Tree组件实现可搜索的树，树控件的搜索功能，antd Tree 组件 带搜索，动态list数据，tree嵌套数据，搜索后关键字标红，具备搜索功能的树形组件，
Antd 树组件删除节点后选中同级节点
weixin_46002065的博客
09-24 556
antd树组件删除节点后选中同级节点
Ant Design Vue的a-tree组件实现点击文字选中/取消选中节点
Honiler的博客
08-03 6489
Ant Design Vue的a-tree组件实现点击文字选中/取消选中节点
(vue)AntD表格操作完成后去掉勾选
nyf_unknow的博客
06-14 3445
(vue)15.AntD表格操作完成后去掉勾选
antd vue tree 选中的菜单显示单独取消选中，tree取消子级选中 关联父级同时取消选中
nongmai6494的博客
07-15 2788
代码】antdvuetree选中的菜单显示单独取消选中，tree取消子级选中关联父级同时取消选中。
antdesign3.26.19中Tree树形控件取消select选中高亮
weixin_55897003的博客
01-20 809
其实很简单只需要给Tree组件加上selectedKeys={[]} 就可以了。
vue3 antd Tree控件异步数据加载，对树增删改更新整个树的数据时，会导致节点的展开按钮消失，节点再也无法展开
weixin_45440916的博客
03-20 2383
Tree控件异步数据加载，对树增删改更新整个树的数据时，会导致节点的展开按钮消失，节点再也无法展开，tree提供的loadData属性，可添加loadedKeys属性，这样可将加载的节点装入其中，在编辑或添加等操作之后也不会出现节点消失的情况。原本为多层树形结构，选择某级进行编辑或者添加后重新调用getOneNode()函数进行刷新，一级节点展开按钮消失，再点也无反应。由于只是绑定loadedKeys，但是一直为[]，点击叶子节点时会导致onLoad方法一直调用，从而进入死循环。
Ant Vue Tree 禁用再次点击就取消选择节点
℡メ㏑╭ァ小凯
02-01 1396
红色地方点两次会取消选中。
antdv-ts + vue3 + setup checked效果制作 全选、部分选择、取消选择
weixin_42516428的博客
11-11 405
效果图 先上效果图 html代码 <a-form class="flex-col flex-start flex-w color-font-0"> <a-form-item v-for="item in CheckFilter" :label="item.name"> <a-checkbox :chec...
取消树的选择状态
honlin的专栏
11-30 671
var checkedNodes=treePanel.getChecked();  if(checkedNodes&& checkedNodes.length){ for(var i=0;i  checkedNodes[i].getUI().toggleCheck(false);   checkedNodes[i].attributes.checked=false; }
vue3里面，如何实现穿梭框自定义重置按钮，点击重置按钮可以清空左侧已选中的数据
zhourongxiang1的博客
03-27 853
操作按钮绑定click方法leftFooter，leftFooter方法中将leftCheckValues设置为空。设置left-default-checked属性绑定data的leftCheckValues。下图是Element UI的穿梭框，要实现的是点击“重置”按钮，清空左侧已选择的“备选项”。同理，右侧的“操作”按钮也能改成“重置”按钮。
使用ant-design-vue（select）遇到的问题，解决重置之后清空值
早晚的博客
10-30 9831
当你的select-option是循环出来的时候，你点击清空以后这个值是不会清空的，当你使用组件自带的api – allowClear的时候，你会发现清空以后是undefined，所以当你清空的时候，你可以在select标签上使用v-model。 <a-select v-model="year" allowClear @change="changeYear" placeholder="请选择检查年份"> <a-select-option v-for="(item,index) in
vue3去除elementPlus的el-tree选中状态(高亮)
前端程序猿的博客
08-12 2092
代码】vue3去除elementPlus的el-tree选中状态(高亮)
【Vue3】搜索 和 重置功能
qq_39921135的博客
06-18 494
【代码】【Vue3】搜索 和 重置功能。
vue3：树的默认勾选和全选、取消全选
weixin_47194802的博客
04-17 4515
实现的功能，上面有个选择框，当选中全部时，下方树被全选。
vue--element-ui--tree组件解决从外部按钮取消选中状态
热门推荐
houdabiao的博客
03-24 2万+
从外部按钮设置----树的选中状态---以及定点删除对应的清空官方提供的方法是：this.$refs.tree.setCheckedKeys([]); 但这只是清除所有;必须找到清除对应的节点清除勾选状态我采用的办法是，把所有要展示的外部删除按钮的id（和树里面的id是对应的，要设置node-key="id"）push在一个新数组里面，上面那个方法例子在下面  &lt;el-tree       ...
【vue3 + antd】Tree 树形控件
m0_65041204的博客
01-18 2401
antd-tree默认展开所有层级，点击文字时也能选中对应节点
elmentui Tree组件单选问题以及清除选中状态
qq_57305148的博客
04-11 1万+
1、实现单选功能：主要利用tree组件中的check、setCheckedKeys方法，需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。 <el-tree ref="tree" :data="data" show-checkbox node-key="dictCode" :props="defaultProps" @check="handleCheck"
怎样实现antdvue 点击树节点弹出该树节点的信息框
03-31
要实现antdvue中点击树节点弹出该树节点的信息框，可以按照以下步骤来进行： 1. 在父组件中定义一个选中的节点变量，用于存储当前选中的树节点。 2. 在树组件中添加一个@click事件，在该事件中将当前点击的节点赋值给选中的节点变量。 3. 在父组件中通过监听选中的节点变量的变化，来弹出对应节点的信息框。 具体代码如下： ``` <template> <div> <a-tree :tree-data="treeData" :default-expand-all="true" @click="handleClick"></a-tree> <a-modal v-if="selectedNode" :title="selectedNode.title" :visible="true" @cancel="handleCancel"> <p>{{ selectedNode.content }}</p> </a-modal> </div> </template> <script> import { Tree, Modal } from &#39;ant-design-vue&#39;; export default { components: { &#39;a-tree&#39;: Tree, &#39;a-modal&#39;: Modal, }, data() { return { treeData: [ { title: &#39;Node1&#39;, key: &#39;1&#39;, content: &#39;This is the content of Node1&#39;, children: [ { title: &#39;Child Node1&#39;, key: &#39;1-1&#39;, content: &#39;This is the content of Child Node1&#39;, }, { title: &#39;Child Node2&#39;, key: &#39;1-2&#39;, content: &#39;This is the content of Child Node2&#39;, }, ], }, { title: &#39;Node2&#39;, key: &#39;2&#39;, content: &#39;This is the content of Node2&#39;, }, ], selectedNode: null, }; }, methods: { handleClick(node) { this.selectedNode = node; }, handleCancel() { this.selectedNode = null; }, }, }; </script> ``` 在上述代码中，定义了一个树形组件，其中每个节点都有一个title和一个content属性，分别代表节点的标题和内容。在点击节点时，将当前节点赋值给selectedNode变量，然后在父组件中通过v-if指令来控制是否弹出信息框，并将selectedNode的title和content分别传递给信息框的标题和内容。在点击信息框的取消按钮时，将selectedNode变量重置为null，关闭信息框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值