webcoderj / ele-multi-cascader Goto Github PK
View Code? Open in Web Editor NEWElementUI-based 多选级联选择器
Home Page: https://webcoderj.github.io/ele-multi-cascader/
License: MIT License
ElementUI-based 多选级联选择器
Home Page: https://webcoderj.github.io/ele-multi-cascader/
License: MIT License
选择多级以后,输入框中的小叉号不能删除
获取的数据有点长,展示不全,没有相应的show-overflow-tooltip,或者单独改变每个menu_item的长度大小
父节点选中,不能默认全选子节点吗?
项目中安装插件,部署上线时,打包提示报错,
比如:归属类需求,一般需要一级单选,二级多选
数据量比较大或者变化的频繁时需要动态加载选项,会支持吗
<div class="menu">
<div class="title">
<div class="title-content">语音实时监控</div>
<div class="tips">
<span>最近10分钟的累积数据,每5秒钟刷新一次</span>
</div>
</div>
<div class="select-menu">
<el-form
ref="form"
:rules="rules"
:inline="true"
:model="form"
>
<el-form-item prop="selectedProductions">
<ele-multi-cascader
:options="productionOptions"
v-model="form.selectedProductions"
placeholder="选择平台/机型/机芯"
size="medium"
:clearable="true"
:collapse-tags="true"
:show-all-levels="true"
:output-level-value="true"
:select-children="true"
></ele-multi-cascader>
</el-form-item>
<el-form-item prop="selectedLocations">
<ele-multi-cascader
:options="locationOptions"
v-model="form.selectedLocations"
placeholder="选择地区"
size="medium"
:clearable="true"
:collapse-tags="true"
:show-all-levels="true"
:output-level-value="true"
:select-children="true"
@clickItem="clickItem"
></ele-multi-cascader>
</el-form-item>
</el-form>
</div>
</div>
.voice-monitor {
margin: 0 5%;
}
.menu {
display: flex;
height: 54px;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.title {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: "#fff";
}
.title-content {
font-size: 18px;
font-weight: bolder;
color: #001309;
height: 27px;
}
.tips {
font-size: 12px;
color: #879099;
height: 27px;
line-height: 27px;
}
.select-menu {
float: right;
}
.echart-title {
display: flex;
height: 50px;
padding: 0 3%;
margin: 0;
box-shadow: 0 3px 8px #888;
border-bottom: 1px solid #c0bebe;
border-radius: 10px 10px 0 0;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #fff;
}
.echart-container {
margin-bottom: 50px;
}
.echart-menu {
display: flex;
width: 18%;
flex-direction: row;
justify-content: space-around;
}
这是模板和样式,我是而没有写对吗?
你好,你的组件很棒,但是想提问能不能加搜索功能?
选完之后,点某一个按钮将v-model绑定的值设为空,选择框里还存在之前的值。看了下源码,感觉是跟this.hasInitModel有关
不同父级下各有一个子级相同名字时,多选这些相同名字的子级后,小叉号删除不了最后一个,没有设置show-all-levels为true的情况下。
我先選中類別
然後再去按大類別
這時候應該是大類別下的中類別全選(小類別亦全選)
然後我再按一次大類別
應該要全部都沒選
結果一開始按的中類別還亮著
你好,我看到你的源码里面有如下代码
.cascader-menu {
width: 160px !important;
}
请问下这个样式能否去掉呢?
自适应宽度不是更好么?
我在ie11下项目报错,错误原因 语法错误
每个人不一样的城市,第一个点明细,城市 显示 正常,第一次也正常,第三次,输入框的文字还是第二次那个文字。不知道你有没有遇到过这问题
作者在源码中将witdh 写死在了160px 导致如果label长度大于160 会被忽略掉,我将你的源码中这段css删除后可以正常显示完成的label了,但是发现当展开三级之后,还是会因为label过长导致样式错位
后来发现您源码中动态改变菜单宽度的代码
// 改变菜单宽度 setPopperWidth() { let width = (160 + 1) * this.casTree.length; document.getElementsByClassName(this.classRef)[0].style.width = width + "px"; }
源码中 设置了 .cascader-popper {width:100%}
我尝试将这些代码删除,解决了这个问题
不知道作者当初设置这些代码的原因是什么
这里依然是基于160 * 子菜单个数算的,这依然限制了面板的长度,导致错位了,请问作者对这个问题怎么解决
点击输入框,后面的icon会展开收起的变化,但是popover没有收起
输入框条数限制以和子选项单选的需求有支持吗?
作者目前的实现,全选节点时,会把所有的子节点,显示到输出框,并且绑定的model值,把所有孩子节点全部加入
有时候,我们可以支持选择父级节点,在全选时,不需要再迭代子节点的选中
当子节点不全选时,显示选中的子节点
代码可以改一处: main.vue 中 pickCheckedItem
loop方法中的子节点的迭代if条件,变成else if即可
if (item.checked) {
const newItem = removeParent(item)
vm.selectedItems.push(newItem)
vm.selectedLabels.push(vm.getLevel(item, vm.labelKey, vm.showAllLevels))
vm.selectedValues.push(vm.getLevel(item, vm.valueKey, vm.outputLevelValue))
} else if (hasArrayChild(item, vm.childrenKey)) {
loop(item[vm.childrenKey])
}
想要的效果是只有最后一级才支持多选,上一级不能多选
过程: v-model绑定数组ARR,多选完成后,根据其他逻辑判断,删除了ARR最后一项;
问题: 选择框和下拉列表里的选中状态都未更新。
建议:将/src/main/main.vue Line53移到里面
不支持组件局部注册吗
在demo里面,中间那一列是怎么配置成禁止选择的?
有没有想法实现模糊搜索,最近工作比较闲,打算实现下这个功能
[Vue warn]: Duplicate keys detected: '服装'. This may cause an update error.
你好,我做vue项目不多,刚刚在新项目遇到级联多选的问题,感谢提供这么棒的工具。
现在有想增加一个功能:
第一级显示北京,第二级有东城区,西城区等;
点击东城区的话,目前只展示东城区。
我想修改成“北京/东城区”来展示。
我得怎么修改呢?或者说该怎么配置?
Thx
需要增加一个全选选项,但是值改变了,页面的选中状态没有变化。
我的思路是 监听 clickItem 事件,当点击当全选选项时,判断是否是选中还是取消。如下:
clickItem(item) {
let label = item.label;
let checked = item.checked;
switch (label) {
case "全选":
if (checked) {
console.log("选中全选");
console.log(this.form.selectedLocations);
this.form.selectedLocations = allProvinces;
console.log(this.form.selectedLocations);
} else {
console.log("取消全选");
console.log(this.form.selectedLocations);
this.form.selectedLocations = [];
console.log(this.form.selectedLocations);
}
break;
default:
break;
}
},
请问这是为什么呢?
谢谢开发了这个组件!!
后期是否会支持配置为“hover”展示次级菜单?
现:可以选择不同级内容中的子级
改:只能选择同一级内容下的子级
[Vue warn]: Invalid prop: type check failed for prop "selectChildren". Expected Boolean, got String with value "true".
"ele-multi-cascader": "^2.0.7",
安装的是 2.0.7 版本
最好不需要用户设置data,配置一个属性就可以那种。
clearable和popper-class这两个属性不生效耶~
提示 main.vue?4a51:512 You must return a Promise instance in loadChildrenMethod !
请问网络请求回来的数据需要满足什么样的格式
getLoadChildrenMethod(value) {
let test = [
{ label: '微信扫码1', value: '1-1' },
{ label: '微信扫码2', value: '1-2' },
{ label: '微信扫码3', value: '1-3' },
{ label: '微信扫码4', value: '1-4' }
]
return new Promise((resolve, reject) => {
console.log(test)
resolve(test)
})
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.