基于ant-design-vue二次开发的级联多选组件

最新推荐文章于 2024-04-10 15:33:41 发布
最新推荐文章于 2024-04-10 15:33:41 发布
阅读量3.9k 收藏 3
点赞数 2
分类专栏： 前端 文章标签： js javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/isusjjyy/article/details/116423781
版权

由于ant-design-vue官方文档中级联多选只有垂直的结构，没有水平的结构，所以封装一个水平多选的级联业务组件以用于相关需求的开发，效果如下所示：

具体使用方式参考doit-ui-web官方文档

http://my.h5house.com

郭文武
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于antd Cascader组件 自定义一个支持父级单选，子级多选的组件
weixin_41458007的博客
11-12 4763
需要一个支持多选的组件，且一级单选，二级多选 antd的Cascader组件multiple好像不支持多选(不知道是不是版本问题)，满足不了需求，自己写了一个 一级选中后，除选中项，其他项都disabled，但是二级可多选。 封装的子组件 > import React from "react"; import PropTypes from "prop-types"; import { get, isEmpty, reduce, includes, filter } from "lodash"; i
记: vue element Cascader 级联选择器 子级全选则传父级, 子级未全选则传子级
weixin_45945615的博客
01-27 5659
在思否一位大佬的评论中学到的, 但是忘记在哪个帖子了… 需求: 级联选择器中 子级全选则传父级key, 子级未全选则传子级key element Cascader 级联选择器 中有一个方法: getCheckedNodes() let CheckedNodes = this.$refs.region.getCheckedNodes() CheckedNodes = CheckedNodes.filter(option => !(option.parent && option.pa.
[Vue2]AntDesignVue基于Select封装「多选 + 二级级联+ 可自定义添加item 组件」
SCUhzs
05-17 7422
[Vue2]AntDesignVue基于Select封装「多选 + 二级级联+ 可自定义添加item 组件」
ant design of vue Cascader 级联选择回显及传值
weixin_46055718的博客
08-22 2084
事件函数中被激发的属性，可以用它获取到选中数据所带的所有值。拿到cascader选中的那一条数据所对应的所有值可以用。
Vue3 手写联级选择面板组件
最新发布
weixin_43552291的博客
04-10 580
Vue3实现级联面板组件
ant design vue:tree select根据层级设置不可选
1111111111
04-03 5370
官网的案例，直接从数据生产tree，这种方法固然简单，但是我这个需求要根据tree的层级来设置是否可选，所以需要进一步设置每一个层次的node。 <a-tree-select v-model="value" style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="Please select
vue多级多选菜单组件开发
09-01
主要为大家分享了vue多级多选菜单组件开发案例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于vue20实现的级联选择器
08-12
在"基于vue20实现的级联选择器"项目中，我们将会深入探讨如何使用 Vue.js v2.0 版本来构建一个功能丰富的级联选择器组件。这个组件能够支持单级、二级、三级乃至多级的级联效果，为用户提供了灵活的数据选择体验。 ...
省市区三级联动-ant格式-全国数据
05-07
vue ant-design中使用的a-cascader 省市区三级联动 前端所使用的全国数据
Ant design vue 的组件禁用属性 disabled.pdf
12-16
Ant design vue 的组件禁用属性 disabled
Ant Desgin Vue级联js.rar
11-22
Ant Design Vue则是基于Vue.js的组件库，它提供了丰富的UI组件，使得开发者能够快速构建出美观且响应式的应用。在这个名为"Ant Desgin Vue级联js.rar"的压缩包中，包含的是关于Vue.js与Ant Design Vue结合使用的级联...
省市区3级联动数据ant design
09-07
省市区3级联动数据，包含港澳台下的市区，可用于 ant design 下的各个组件库
vueH5级联组件，实现全选，非全选
manda Liu的博客
03-01 412
vueH5级联组件，实现全选，非全选。
Vue 学习随笔系列一 -- Cascader 级联选择器
mm_0123456789的博客
03-02 3359
Cascader 级联选择器
vue 移动端 级联选择器支持多选父子关联 、父关联子不关联、还有父子 都不关联。外加一个单选
weixin_46040114的博客
07-04 2787
vue 移动端 级联选择器
Vue3+Ts+Ant Design Vue实现多选框的全选功能
m0_52449484的博客
10-08 983
Vue3+Ts+Ant Design Vue实现select下拉框的多选和全选功能
antd联级选择器多选状态下，关联子项数据
清云
04-13 5564
antd联级选择器多选状态下，关联子项数据
Vue3级联选择（Cascader）
Mr Dear的博客
03-31 5271
Vue3+TS 以 Vue3选择框（Select）为基础封装的级联选择框组件，支持清除，搜索，自定义搜索过滤函数等等
VUE 级联多选的方法，任意一级选择
qq_33304139的博客
12-20 6572
本人使用vue2.13.0版本 首先说vue进行级联选择，可以选择任意一级 其样本如下 代码部分： <div class="block"> <span class="demonstration">单选选择任意一级选项</span> <el-cascader :options="options" :props="{ checkStr...
ant-design-vue 三级联动怎么实现
03-24
您可以使用 Cascader 组件来实现 ant-design-vue 的三级联动。Cascader 组件是一个级联选择器，可以方便地实现多级联动选择。您可以在 Cascader 组件中设置 options 属性来定义选项列表，然后在 onChange 事件中获取选中的值。以下是一个示例代码： ``` <template> <a-cascader :options="options" v-model="selectedValues" @change="handleChange"></a-cascader> </template> <script> export default { data() { return { options: [ { value: 'beijing', label: '北京', children: [ { value: 'dongcheng', label: '东城', children: [ { value: 'tiananmen', label: '天安门' }, { value: 'wangfujing', label: '王府井' } ] }, { value: 'xicheng', label: '西城', children: [ { value: 'xidan', label: '西单' }, { value: 'fuchengmen', label: '阜成门' } ] } ] }, { value: 'shanghai', label: '上海', children: [ { value: 'pudong', label: '浦东', children: [ { value: 'lujiazui', label: '陆家嘴' }, { value: 'zhangjiang', label: '张江' } ] }, { value: 'puxi', label: '浦西', children: [ { value: 'nanjinglu', label: '南京路' }, { value: 'thebund', label: '外滩' } ] } ] } ], selectedValues: [] } }, methods: { handleChange(value) { console.log(value) } } } </script> ``` 在这个示例中，我们定义了一个 options 数组，其中包含了北京和上海两个城市，每个城市下面又包含了两个区域，每个区域下面又包含了两个街道。当用户选择某个选项时，会触发 onChange 事件，我们可以在事件处理函数中获取到用户选择的值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值