antVue--a-cascader级联组件使用触发loadData方法注意事项
<template>
<a-cascader
:options="options"
:load-data="loadData"
placeholder="Please select"
change-on-select
@change="onChange"
/>
</template>
<script>
export default {
data() {
return {
options: [
{
value: 'zhejiang',
label: 'Zhejiang',
isLeaf: false,
},
{
value: 'jiangsu',
label: 'Jiangsu',
isLeaf: false,
},
],
};
},
methods: {
onChange(value) {
console.log(value);
},
loadData(selectedOptions) {
const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true; // load options lazily
setTimeout(() => {
targetOption.loading = false;
targetOption.children = [
{
label: `${targetOption.label} Dynamic 1`,
value: 'dynamic1',
},
{
label: `${targetOption.label} Dynamic 2`,
value: 'dynamic2',
},
];
this.options = [...this.options];
}, 1000);
},
},
};
</script>
a-cascader组件实现级联功能,该功能要求动态加载选项,代码是api上的例子,
该功能想要触发loadData方法一定要设置 isLeaf:false这个属性 一定要设置 不然不会触发的

antVue--a-cascader级联组件使用触发loadData方法注意事项的更多相关文章
- Android WebView的loadData方法注意事项
loadData()中的html data中不能包含'#', '%', '\', '?'四中特殊字符,出现这种字符就会出现解析错误,显示找不到网页还有部分html代码.需要如何处理呢?我们需要用Url ...
- ElementUI组件Cascader级联选择器数据后台处理
Cascader级联选择器数据数据格式不知道的可以去官网看下:这里我就不表示什么了. 部门实体类: import lombok.Data; @Data public class Department ...
- Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...
- 分离的思想结合单链表实现级联组件:CascadeView
本文介绍自己最近做省市级联的类似的级联功能的实现思路,为了尽可能地做到职责分离跟表现与行为分离,这个功能拆分成了2个组件并用到了单链表来实现关键的级联逻辑,下一段有演示效果的gif图.虽然这是个很常见 ...
- element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)
来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...
- JS日期级联组件代码分析及demo
最近研究下JS日期级联效果 感觉还不错,然后看了下kissy也正好有这么一个组件,也看了下源码,写的还不错,通过google最早是在2011年 淘宝的虎牙(花名)用原审JS写了一个(貌似据说是从YUI ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- element-ui Cascader 级联选择器示例
<html> <head>test</head> <style> @import url("http://unpkg.com/element- ...
- element 的 Cascader 级联选择器设定默认值
Cascader 级联选择器 发现在很多的CRM管理系统里面,都有不少页面是用到这种级联选择器的,确实,功能很实用, 不过要设置默认值则应该让不少人头痛,因为你选择的时候 @change 事件的参数就 ...
- vue 无限递归级联组件实现方案
最终组件效果图: 无限级联组件实现思想: 在这里有一个很重要的地方就是前端组件如何与后端匹配方法协调好,无限级联很好实现,但是如何让服务器端可以成功的匹配到条件是一个问题,在这里我借鉴了html元素的 ...
随机推荐
- datax缺少clickhouse reader插件
背景:想要把click house的数据源同步到clickhouse,发现Datax没有clickhousereader组件. 1.把clickhousewriter/libs下的所有jar包复制到r ...
- 单元测试成神之路——Golang篇
这位大佬写的太好了 https://zhangyuyu.github.io/golang-unit-test/
- 探索如何在java中执行python脚本
一个偶然的场景,笔者需要在java代码中执行某个python脚本,并且需要向脚本中传递参数,有可能的话,还要获取该脚本的某些执行结果,回到主程序中继续执行下去. 没有思路之前,狭隘的想法是,java中 ...
- [vite] Internal server error: Invalid end tag.
使用vue3+vite+ant搭建的前端框架 在开发页面的时候发现了一直报错: [vite] Internal server error: Invalid end tag. 找也找不到为什么,网上查的 ...
- TypeScript - 属性的修饰符
class Person { /** * TS 可以再属性前增加属性的修饰符 * public 修饰的属性可以再任意位置访问(修改)默认值 * private 私有属性,私有属性只能在类内部进行访问和 ...
- RabbitMQ异常注意 reply-code=404, reply-text=NOT_FOUND - no exchange 'topic' in vhost '/', class-id=50
1.问题排查: 第一次,一定要先启动Provider再启动Consumer!!! rabbitmq为初始状态没有队列信息,然后我又没有启动consumer,所以导致provider找不到queue和e ...
- 11、java环形单链表解决约瑟夫问题
环形单向链表:守卫连接的一个单向链表,每个节点中有其变量和一个指针指向下一个节点.头节点可有可无,此处写的没有头节点. 创建,先创建一个没有数据的first节点表示整个链表的第一个节点 添加,此处的添 ...
- 日志分析查看—— cat+grep+awk+uniq+sort+wc+join
有个统计日志信息的需求,下面是使用到的命令 //按 \t 对文件每一行进行切割,正则匹配第二列为32896时,输出第一列:再进行排序并去重,最后统计行数 cat file.log|awk -F '\t ...
- win10系统如何安装无线网卡驱动?win10系统安装无线网卡驱动教程
转载:win10系统如何安装无线网卡驱动?win10系统安装无线网卡驱动教程_windows10_Windows系列_操作系统_脚本之家 (jb51.net) win10系统如何安装无线网卡驱动? 有 ...
- 来自StateOfJS调查:2022年JavaScript生态圈趋势报告(前端早读课)
原文 我这里记录些觉得有趣的. Promise.allSettled() 完成所有输入的方法,no matter what,返回对应的状态和值/原因,这对想知道所有返回状态的业务很好用:使用async ...