当前位置: 首页 > news >正文

el-cascader多选的父子关联和父子不关联功能

公用html:

<el-cascader v-model="data" :options="optionsData" :props="props" clearable>
</el-cascader>

公用js变量:

data () {return {// 绑定的数组data: [],// 绑定的选项数据optionsData: []}
},

公用js方法:

/*** 获取绑定的选项数据*/
getOptionsData(){getOptionsData().then(res => {let { data } = res;this.optionsData = this.handleCategory(data)});
},
/*** 处理绑定的选项数据*/
handleData(data) {let res = [];if (data.length > 0) {data.map(item => {let obj = {value: item.id,label: item.title,};if(item.children && item.children.length > 0) {obj.children = this.handleCategory(item.children);};res.push(obj);});};return res;
}

 

第一种 父子关联属性:

data () {return {// 绑定的属性props: { multiple: true }}
},

 效果图:

第二种 父子不关联属性:

data () {return {// 绑定的属性props: { multiple: true, checkStrictly: true }}
},

 效果图:

http://www.lryc.cn/news/424747.html

相关文章:

  • #Datawhale AI夏令营第4期#多模态大模型Task2
  • LeetCode 热题100-1
  • 表现良好的最长时间段(LeetCode)
  • 【性能优化】DNS解析优化
  • 【剑指 offer】合并链表
  • 红酒与节日装饰:打造节日氛围的需备品
  • Element Plus的el-carousel走马灯平铺多张图片
  • 【promise】Promise的几个关键问题 (三)
  • 利用ZXing.Net Bindings for EmguCV识别条形码及绘制条形码边框17(C#)
  • IP代理如何增强网络安全性?
  • NDP(Neighbor Discovery Protocol)简介
  • 为何要隐藏源 IP 地址?
  • 目前最流行的前端构建工具,你知道几个?
  • C++函数模板温习总结
  • 【网络】套接字(socket)编程——TCP版
  • 水凝胶生物打印是什么?如何指导Organoids培养?有啥好处?
  • 从springBoot框架服务器上下载文件 自定义一个启动器
  • 某通电子文档安全管理系统 CDGAuthoriseTempletService1接口SQL注入漏洞复现 [附POC]
  • pythonselenium自动化测试实战项目(完整、全面)
  • 如何选择合适的虚拟机软件?对比Parallels Desktop 和VMware Fusion 使用虚拟机畅玩黑神话悟空
  • ESP32FreeRTOS开发笔记:2.定义、多任务与优先级调度
  • 【Python-办公自动化】1秒比较出2张表格之间的不同并标黄加粗
  • Linux下查看各进程的swap
  • 最后一个单词的长度 简单字符串问题
  • Autodesk Mudbox 2024:重塑创意边界的3D数字绘画与雕刻利器
  • 【python下用sqlite3, 多线程下报错,原因和解决 】
  • 学习记录——day30 网络编程 端口号port 套接字socket TCP实现网络通信
  • 【DataKit系列】数据迁移-实例搭建步骤(二)
  • 发送jsonp请求(前后端如何实现)
  • Leetcode—1239. 串联字符串的最大长度【中等】(unordered_set)