element 级联选择器使用
<el-cascader
v-model="organSelecList"
:change-on-select="true"
:options="companyBenlist"
placeholder="请选择组织级别"
:props="{ value: 'id', label: 'name',checkStrictly: true}"
@change="handlechange"
size="mini"
clearable>
</el-cascader>
organSelecList获取的是一个数组集合
clearable可清空
companyBenlist是要遍历的数组对象,如果是后台返回的最后一级有children空对象,可以通过回调函数去除空白
getTreeData(data) {
for(var i = 0; i < data.length; i++) {
if(data[i].children.length < 1) {
data[i].children = undefined;
} else {
this.getTreeData(data[i].children);
}
}
return data;
},
element 级联选择器使用的更多相关文章
- vue+element级联选择器对接后台数据
1.后台接口返回的数据肯定要和级联选择器的数据一致,所以我专门弄个model存放返回的值,如下:/** * @Auther: GGDong * @Date: 2019/4/3 10:30 */@Get ...
- 折叠面板实现,上传文件进度条,三级联选择器,多级联选择器, 利用layui实现
首先贴出html代码 <form class="layui-form" action=""> <div class="layui-f ...
- 基于element ui的级联选择器组件实现的分类后台接口
今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持. 这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...
- element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)
来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- Element UI:级联选择器Cascader_动态加载_多级请求不同接口(已知第一级调取第二级)
ELEMENT UI_CASCADER 使用过饿了么级联动态加载的小伙伴应该都知道,lazyLoad本身是一个无差别返回渲染结点的函数. 当我们存在一个需求:已知级联选择器的第一级结点,现在需要通过第 ...
- 记录一下使用element ui使用级联选择器的坑,级联选择器的默认选中
Cascader 级联选择器 使用级联选择器我使用的是默认选中值 下面是我的数据格式,只是形式相同,值不同, 后台的数据是这样的不是ID //级联选择器 <el-cascader :props= ...
- element 的 Cascader 级联选择器设定默认值
Cascader 级联选择器 发现在很多的CRM管理系统里面,都有不少页面是用到这种级联选择器的,确实,功能很实用, 不过要设置默认值则应该让不少人头痛,因为你选择的时候 @change 事件的参数就 ...
- Vue省市区三级联选择器V-Distpicker的使用
Vue省市区三级联选择器V-Distpicker的使用 最近用的Vue+Element UI时,有些地方需要用到省市区三联选择器,网上安装并尝试了多种类似的插件,但都因为无法正常实现或是没有眼缘而弃用 ...
随机推荐
- Leetcode884.Uncommon Words from Two Sentences两句话中的不常见单词
给定两个句子 A 和 B . (句子是一串由空格分隔的单词.每个单词仅由小写字母组成.) 如果一个单词在其中一个句子中只出现一次,在另一个句子中却没有出现,那么这个单词就是不常见的. 返回所有不常用单 ...
- 介绍(javascript调试)
Chrome developer tool Chrome浏览器得益于其优秀的V8解释器,javascript执行速度和内存占有率表现非常优秀.对于html+css+javascript前台技术的学习或 ...
- MUI - sortable在mui.js前端框架不兼容的解决方案
关于sortable看这 兼容的解决方案看这 http://www.cnblogs.com/phillyx/ 示例代码已更到github
- PHP Laravel系列之环境搭建( VirtualBox+Vagrant+Homestead+系列网址)
搭建环境从来都是阻挡一门新技能的最致命的硬伤,为了这个环境,我又是花费了半天的时间,各种问题层出不穷,下面基于网上的一些教程(我看到的都多少有些问题) 开始的时候是在实验楼这个平台上开始学习的,不过 ...
- photoshop正确的打开方式
首先这边我先贴一个地址:https://www.adobe.com/cn/products/photoshop.html 安装软件,这里就不赘述了,真的不会,可以百度^_^我当初就是百度的,哈哈 说到 ...
- pycharm 的简单操作
pycharm常用 快捷键 ctrl + q 快速查看文档 ctrl + 鼠标左键 进入代码定义 CTRL + F1 显示错误描述或警告信息 F3 下一个 Shift + F3 前一个 Ctrl + ...
- 罗列Python标准模块
文本 1. string:通用字符串操作 2. re:正则表达式操作 3. difflib:差异计算工具 4. textwrap:文本填充 5. unicodedata:Unicode字符数据库 6. ...
- Android 使用SwipeActionAdapter开源库实现简单列表的左右滑动操作
我们做listview左右滑动操作时,一般中情况下,都是像QQ那样,左滑弹出操作菜单(删除.编辑),然后选择菜单操作: 这样的效果不可谓不好,算是非常经典. 另外,有少数的APP,尤其是任务管理类的A ...
- util.date
package com.sxt.utils.date1; import java.util.Date; /* * util.date */ public class TestDate { public ...
- SDUT-2132_数据结构实验之栈与队列二:一般算术表达式转换成后缀式
数据结构实验之栈与队列二:一般算术表达式转换成后缀式 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 对于一个基于二元运 ...