使用Cascader 级联选择器删除最后一级为空的数据

最新推荐文章于 2024-06-27 11:05:01 发布
最新推荐文章于 2024-06-27 11:05:01 发布
阅读量703 收藏 2
点赞数 1
分类专栏： element 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38154173/article/details/108198755
版权

在使用Cascader 级联选择器的时候，发现最后一级如果是空的话，也会有空白的列表出来，其实这个完全没有必要，页面也不美观，所以就想办法把它删掉，我就直接贴一下代码啦

在这里插入图片描述

qq_38154173
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue开发实战四：Cascader 级联选择器的使用
博主逸尘
12-30 4291
文章目录1. 页面最终展示2.获取数据及组件选择3.组件引用及Demo实现4.调试数据适配组件5.配置组件属性适配数据6.组件数据获取 1. 页面最终展示 按需求要求只能选择第三级的数据，并且数据不超过三级，点击了第三级列表自动增加一条数据 之前做的类似的功能新增及列表功能如下： 2.获取数据及组件选择 很多情况下我们获取到的数据并不符合我们的需要，因此需要我们处理下，当然这个工作可以交给后端，我前端要啥样的数据你就需要给我提供什么样的数据，先看下最初我们获取的数据如下： 数据处理这里先不说，后面
Element-ui： el-cascader 级联选择器 可以单独选择任意一级选项，去掉单选按钮
qq_40184218的博客
08-09 5394
目标： 1、vue项目中需要使用el-cascader组件，由于官方有单选框，所以需要根据业务去掉单选框点击文字就可以选择任意一级的内容。 效果图如下： 期望：（可以选择任何一级，有三级情况下，想选择二级就选择二级，并且去掉单选框） 步骤如下： 1.先设置父子节点取消选中关联，从而达到选择任意一级选项的目的 代码： <el-cascader :props="{ checkStrictly: true }" popper-class='自定义类名' clearable></el-casc
Element UI 中Cascader 级联选择器去除最后一级空数组
小破孩的博客
08-31 1530
// 递归判断列表，把最后的children设为undefined getTreeData(data) { for (var i = 0; i < data.length; i++) { if (data[i].node.length < 1) { // children若为空数组，则将children设为undefined data[i].node = undefined; } els.
react 循环多个Cascader，清空数据将默认值设为 undefined 无效时，可调用 x 图标的点击事件(删除)解决
weixin_43848571的博客
02-28 900
const clearLen = [ ...document.getElementsByClassName("ant-cascader-picker-clear"), ].length; if (clearLen) { document .getElementsByClassName("ant-cascader-picker") [index].getElementsByClassName("ant-cascader-picker...
vant2 级联选择器 van-cascader 实现部分选项禁用
最新发布
yanzhe6789的博客
06-27 407
级联自定义列表为复选框，复选框自定义隐藏掉小方框；数据根据业务添加flag确认该选项是否禁用，该flag用于绑定复选框disabled；最后的样式是点击禁用的数据是，级联选择器也会默认在最后面打勾，隐藏掉。最后，在点击确认时，验证数据，confirm方法根据自身需求，提示请选择之类的。
Cascader 级联选择器 - 选择器最后一级数据为空
ioncannontic的博客
04-13 277
Cascader 级联选择器 - 选择器最后一级数据为空
vant v2 版本 van-cascader实现部分选项禁用
qq_41537593的博客
06-07 583
vant2的van-cascader实现部分选项禁用。 存储一个不可选择的id数组，自定义van-cascader的option，判断当前option的id属于不可选择的时候，设置禁用样式，同时在@finish拦截关闭和选择赋值事件。/*隐藏选择的 √ */有问题可评论或私信。
Cascader 级联选择器通过状态展示隐藏
weixin_45259626的博客
12-09 2616
在项目中遇到一个新需求，Cascader 级联选择器选择以后，选中的那个数据后来被删除了，但是还要让它回显和以前一样。 后端就把所有的数据都保留了，但增加了一个状态字段，供我判断哪些是删除了的,status===0表示删除。我拿到数据以后配合element的disabled来改变下拉框样式将数据隐藏。 <el-cascader v-model="value" :options="options" ></el-cascader> da
Cascader级联选择器只展示后端返回的前两层
qq_43648676的博客
07-26 1224
Cascader级联选择器只展示后端返回的前两层
一个页面有多个el-cascader级联选择器时，怎么解决动态加载和回显问题
qq_38019414的博客
06-14 2920
一个页面有多个el-cascader时，怎么解决动态加载和回显问题
el-cascader 子级为空时不显示问题/只展示到相应层级
m0_52545254的博客
06-08 3319
这个和上面的区别就是，不管三级之后有没有数据，children是否为空，都给删除掉了。但是二级没有子级的时候还是会展示三级的暂无数据空白项。使用element-ui的el-cascader级联组件时，当子级为空时，会展示暂无数据的的空白页，要求是无数据的不展示。还有一个需求是，只展示到三级，三级之后的子级不再展示。
antd Cascader处理
weixin_45346457的博客
11-16 1138
/** * 删除Cascader级联最后一级空数据 * @param {*} data */ export function initTree(data) { for (let i = 0; i < data?.length; i++) { if (data[i].children && data[i].children.length < 1) { delete data[i].children; // eslint-disable-line no.
Vant Cascader级联选择 实现省市区三级
qq_64775236的博客
03-09 512
Vant Cascader级联选择 实现省市区三级
Vant Cascader省市区数据太多，点一次掉一次子级数据
Hanx_的博客
04-08 795
最近需求是 省市区县，有四级或更多级，数据实在是太多（四万多条数据），如果后端一次性返回，速度实在是太慢，十几秒后才返回，不太行，所以就新出了个接口。我用的 vant 的 Cascader 组件，封装成一个组件了，点击确定事件和取消事件用的父子事件。因为可能选择二级就完成了，也可能选择三级、四级，所以最下面加了个确定按钮，点击确定才算完成。因为之前省市区最多只有三级数据，总共不到四千条数据，所以接口返回的速度还好。：后端返回一级数据，点一下父级，掉一下接口获取子级数据。接口返回的第一级数据。
antd4的cascader动态加载需要点击两下才会加载子级数据,而且加载的是第一次请求的
qq_41549657的博客
02-10 1175
我的需求是使用cascaser的动态加载和多选功能 首先多选功能是需要4.17.0版本才有的，一开始没注意到自己antd的版本比较低，还以为这两个功能不能合并在一起 还有遇到的一个问题就是需要点击两下才会加载自己数据 首先附上官网的示例代码 const loadData = selectedOptions => { const targetOption = selectedOptions[selectedOptions.length - 1]; // 这行可设置可不设置
van-cascader异步加载数据
weixin_57246351的博客
06-07 1062
【代码】van-cascader异步加载数据。
Cascader 动态加载下一级的解决办法element-ui 2.12.0 lazyload和change方法
beichen3997的博客
10-29 6239
文件有2个关键点 <template> <section class="main-content"> <section class="content-body pall15" v-if="showRule"> <div class="eboss-row"> &...
微信小程序自定义数据实现级联省市区组件
Shids_的博客
12-04 3219
微信小程序自定义数据实现级联省市区组件
el-cascader级联选择器选择任意一级
08-16
C知道：对于el-cascader级联选择器，您可以设置`change-on-select`属性为true，以允许选择任意一级。默认情况下，该属性为false，只有当选择完整的级联路径后才会触发change事件。但是，将`change-on-select`设置为true后，您可以在选择任意一级时触发change事件。以下是一个示例： ```html <template> <el-cascader :options="options" :props="props" change-on-select @change="handleCascaderChange" ></el-cascader> </template> <script> export default { data() { return { options: [ { value: '1', label: 'Option 1', children: [ { value: '1-1', label: 'Option 1-1', children: [ { value: '1-1-1', label: 'Option 1-1-1', }, { value: '1-1-2', label: 'Option 1-1-2', }, ], }, { value: '1-2', label: 'Option 1-2', }, ], }, ], props: { value: 'value', label: 'label', children: 'children', }, }; }, methods: { handleCascaderChange(value) { console.log(value); }, }, }; </script> ``` 在上述示例中，将`change-on-select`设置为true后，无论选择到哪个级别，都会触发`handleCascaderChange`方法，并打印选择的值。 希望对您有所帮助！如果有任何其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值