<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方法注意事项的更多相关文章

  1. Android WebView的loadData方法注意事项

    loadData()中的html data中不能包含'#', '%', '\', '?'四中特殊字符,出现这种字符就会出现解析错误,显示找不到网页还有部分html代码.需要如何处理呢?我们需要用Url ...

  2. ElementUI组件Cascader级联选择器数据后台处理

    Cascader级联选择器数据数据格式不知道的可以去官网看下:这里我就不表示什么了. 部门实体类: import lombok.Data; @Data public class Department ...

  3. Cascader 级联选择器

    当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...

  4. 分离的思想结合单链表实现级联组件:CascadeView

    本文介绍自己最近做省市级联的类似的级联功能的实现思路,为了尽可能地做到职责分离跟表现与行为分离,这个功能拆分成了2个组件并用到了单链表来实现关键的级联逻辑,下一段有演示效果的gif图.虽然这是个很常见 ...

  5. element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)

    来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...

  6. JS日期级联组件代码分析及demo

    最近研究下JS日期级联效果 感觉还不错,然后看了下kissy也正好有这么一个组件,也看了下源码,写的还不错,通过google最早是在2011年 淘宝的虎牙(花名)用原审JS写了一个(貌似据说是从YUI ...

  7. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  8. element-ui Cascader 级联选择器示例

    <html> <head>test</head> <style> @import url("http://unpkg.com/element- ...

  9. element 的 Cascader 级联选择器设定默认值

    Cascader 级联选择器 发现在很多的CRM管理系统里面,都有不少页面是用到这种级联选择器的,确实,功能很实用, 不过要设置默认值则应该让不少人头痛,因为你选择的时候 @change 事件的参数就 ...

  10. vue 无限递归级联组件实现方案

    最终组件效果图: 无限级联组件实现思想: 在这里有一个很重要的地方就是前端组件如何与后端匹配方法协调好,无限级联很好实现,但是如何让服务器端可以成功的匹配到条件是一个问题,在这里我借鉴了html元素的 ...

随机推荐

  1. 《黑马旅游网》综合案例六 BaseServlet 抽取

    BaseServlet抽取 减少Servlet的数量,现在是一个功能一个Servlet,将其优化为一个模块一个Servlet, 相当于在数据库中一张表对应一个Servlet,在Servlet中提供不同 ...

  2. vue.config.js --- vue-cli 4.0配置

    // 所有配置请参考 https://cli.vuejs.org/zh/config/ module.exports = { /** * publicPath * hash 模式下可使用 * publ ...

  3. (mysql笔记)GROUP_CONCAT() 把多行数据合并

    不合并查询: 合并查询: SELECT GROUP_CONCAT(id) FROM orderinfo WHERE enterpriseid = 2265 AND shopid =0 AND orde ...

  4. 【Frida】Java反射调用

    通过反射调用,获取类名 参数Object obj 类名 String str 方法名 static Object a(Object obj, String str) { try { return ob ...

  5. Prometheus 特点

    1.1 Prometheus的特点 Prometheus是一个开源的完整监控解决方案,其对传统监控系统的测试和告警模型进行了彻底的颠覆,形成了基于中央化的规则计算.统一分析和告警的新模型. 相比于传统 ...

  6. 新手搭建Git与项目整合

    新手搭建Git,将代码托管到码云 如果你还没有使用过Git,首先先去https://gitee.com/注册一个自己的账户,然后在https://git-scm.com/下载一个客户端(提交代码到码云 ...

  7. 如何在Axure RP 8.0 中打开页面指定的动态面板

    有时在制作原型的时候,需要打开另一个页面指定的动态面板,研究了一下分享给大家 方法/步骤 1.打开Axure RP 8.0,在index面面中拖出来一个按钮,写上文字"打开page1/sta ...

  8. JDK-11.0.17 + Neo4j-4.4.12

    JDK安装 下载地址:https://www.oracle.com/java/technologies/javase-downloads.html 注册Oracle账户,并下载,选择路径安装,将bin ...

  9. Linux学习 --- 网络基础知识

    1.1  IP地址 IP地址由两部分组成  网络号和主机号 .网络号为IP地址的高位组成,而主机号是IP地址的低位组成,两个的大小取决于网络的类型. IP地址根据网络的地址不同分为:A类,B类,C类, ...

  10. zabbix连接Mysql提示Can’t connect to local MySQL server through socket的解决方法

    要解决此错误,有两种解决方法: 1.将连接参数"host"的值由"localhost"改成"127.0.0.1": 2.按下面方法,在&qu ...